2022-12-05 [새싹 프론트엔드] 리액트 라우터 router

https://reactrouter.com/en/main

Home v6.4.4

 

Router는 설치가 필요하다!

$ npm install react-router-dom

 

 

---

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Product from "./components2/Product";
import Home from "./components2/Home";
import NotFound from "./components2/NotFound";

const App2 = () => {
  //createBrowserRouter함수를 생성해준다.
  const router = createBrowserRouter([
    {
      path: "/",
      // "/"란? root라는 뜻이다. 다른 주소값을 넣어주고 싶을떈 /name을 적어주면 된다.
      element: <Home />,
      // element 값엔 컴포넌트를 넣어준다.
      errorElement: <NotFound />,
      // error가 났을때 화면에 표시할 컴포넌트를 넣어준다.
    },
    {
      //Product라는 경로를 새로 만듦
      path: "/Product",
      element: <Product />,
      error: <NotFound />,
    },
  ]);
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
};

export default App2;

---

Outlet 컴포넌트란?

페이지 전체가 아니라 Outlet컴포넌트 내용만 업데이트해주는 컴포넌트

 

import React from "react";
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Product1 from "./components2/Product1";
import Home from "./components2/Home";
import NotFound from "./components2/NotFound";
import Root from "./components2/Root";
import Product2 from "./components2/Product2";
import Product3 from "./components2/Product3";
import Product4 from "./components2/Product4";

const App2 = () => {
  //createBrowserRouter함수를 생성해준다.
  const router = createBrowserRouter([
    {
      path: "/",
      //컴포넌트 파일은 하나 생성하여 Menu와 Outlet의 영역을 담아준다.
      element: <Root />,
      errorElement: <NotFound />,
      children: [
        //index는 local3000으로 접속했을때 defaultLayout을 기준으로 접속하게된다.
        //이때 /가 겹치지않게 하기위해서 첫 페이지는 path가 아닌 index: true값을 지정해줘야한다.
        { index: true, element: <Home /> },
        //큰 카테고리를 만들땐 아래처럼 코드를 작성해주면 되고 카테고리를 눌렀을때 나오는 
        //상세페이지는 :주소 를 사용해야하며 useNavigate를 확인해보자
        { path: "/product1", element: <Product1 /> },
        { path: "/product2", element: <Product2 /> },
        { path: "/product3", element: <Product3 /> },
        { path: "/product4", element: <Product4 /> },
        // path를 사용하여 원하는 주소값을 써주고 element value에는 해당 컴포넌트를 써준다.
      ],
    },
  ]);
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
};

export default App2;
-------------------
import React from "react";
import { Outlet } from "react-router-dom";
import Menu from "./Menu";
const Root = () => {
  return (
    <div>
      {/* App에서 지정한 Root의 자식으로 Menu, Outlet을 넣어줌 */}
      <Menu />
      <Outlet />
    </div>
  );
};

export default Root;


-------

import React from "react";
import { Link } from "react-router-dom";

const Menu = () => {
  return (
    // Menu안에 들어갈 item들을 넣어준다. 이때 App에 createBrowserRouter()함수안에 
    //item자리를 만들어줘야한다. 리액트에선 <a>태그대신 link를 사용한다.
    <div>
      <Link to="/">Home</Link>
      <Link to="/product1">Product1</Link>
      <Link to="/product2">Product2</Link>
      <Link to="/product3">Product3</Link>
    </div>
  );
};

export default Menu;

---

 

 

 

 

 

useNavigate() "함수"

페이지 전환시 추가적인 페이지로 이동해야할때 사용 : ex) 회원가입이 되어있으면 -> Main페이지로이동

useNavigate()는 함수이다. path

 

해당 훅을 실행하면 페이지를 이동 할 수 있는 함수를 반환시킨다.useNavigate()의 인자로 Router에서 설정한 path를 넘겨주면 해당 경로로 이동하는 로직이다.

 

 

 

 

 

useState를 사용한 값은 초기 값이 담겨있지않은경우 1번 click할때는 빈값을 반환하기때문에 페이지가 바로 이동하지않는다. 이럴땐 useEffect를 사용하여 두번째 매개변수값에 value를 넣어주자.

 

 

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Product1 = () => {
  const [productId, setProductId] = useState("");
  const navigate = useNavigate();

  //이때 useState를 사용한 값은 초기 값이 담겨있지않은경우 1번 click할때는 빈값을 반환하기때문에 페이지가 바로 이동하지않는다. 이럴떈 useEffect를 사용해주자
  function clickHandler(e) {
    setProductId(e.target.value);
    console.log(productId);
  }

  useEffect(() => {
    navigate(`/product1/${productId}`);
  }, [productId]);

  return (
    <div>
      {/* 제품상세페이지 value를 작성해주고 click시 해당 값이 navigate1/value 뒤에 작성되게 한다 */}
      <button onClick={clickHandler} value="p001">
        1
      </button>
      <button onClick={clickHandler} value="p002">
        2
      </button>
      <button onClick={clickHandler} value="p003">
        3
      </button>
    </div>
  );
};

export default Product1;

 

---

<Link to="">  "컴포넌트"

Click시 바로 해당 화면으로 이동할떄 사용: ex) 상품리스트 Click시 상세페이지로 전환

<Link to="">는 react-router-dom에서 제공하는 "컴포넌트이다"

큰 카테고리를 만들때 사용

react 에서 <a/>태그대신 사용하는 것

react에성 <a/>태그를 사용하지않는 이유는 <a/> 태그는 페이지 자체를 새로고침해준다(화면 깜빡)하지만 페이지 전부를 새로고침하게 되면 저장되었던 변수값이나 data가 전부 소실되게 되므로react에선 Link를 사용해준다.