Router(정적)

:다양한 페이지를 구현할 수 있게 해주는 패키지이다.
yarn add react-router-dom
1.페이지 컴포넌트 작성 -> 다중 페이지
2.router을 구성하는 설정 코드 작성
3.App.js에 2번을 import하고 적용

기본 코드

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Home from "../pages/home";
import Work from "../pages/Work";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="work/" element={<Work />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router

가장 바깥에 BrowserRouter가 있고, 그 안에 Routes,
그리고 그 안에 pages들에 있는 컴포넌트들이 route안에 element로 들어가게 된다. 이때 path는 경로이다. localhost:3000/work를 검색하면 work페이지가 나온다.

react-router-dom hook

useNavigate
:다른 페이지로 보내고자 할 때 사용할 수 있다.
사용자들이 브라우저에 직접 path를 검색하고 페이지를 입력하는 일은 없다.
버튼을 클릭하면 원하는 path로 페이지를 이동시킬 수 있도록 하는 함수 훅이다.
=> a 태그와 비슷하다!

function Home() {
  const navigate = useNavigate();
  return (
    <div>
      Home
      <br />
      <button
        onClick={() => {
          navigate("/work");
        }}
      >
        이동
      </button>
    </div>
  );
}

useNavigate를 활용하여 work페이지로 넘어갈 수 있다.
onClick에 함수를 넣어주고 그 함수의 기능은 navigate('경로')로 넘어가는 것이다.

useLocation
:현재 위치하고 있는 페이지의 여러가지 정보를 추가적으로 얻을 수 있다.

Link
:훅은 아니지만, 꼭 알아야 할 API!
html태그중에 a 태그의 기능을 대체하는 API이다.
a태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침 되기 때문이다.
브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링이 되어야 하고, 메모리상에 구축해놓은 모든 상태값이 초기화가 된다. 그래서 새로고침을 없애기 위해 a태그 대신 Link를 사용한다.
navigate와는 다르게 함수가 아니다.

function Work() {
  const navigate = useNavigate();
  const location = useLocation();
  return (
    <div>
      Work <br />
      <button
        onClick={() => {
          navigate("/");
        }}
      >
        이동
      </button>
      <Link to="/contact">페이지 이동하기</Link>
    </div>
  );
}

Router(동적)

:path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말한다.
한 페이지에 여러개의 컴포넌트가 있고, 각 컴포넌트마다 독립적인 페이지를 가지도록 구현하려면?

Router.js

import { BrowserRouter, Route, Routes } from "react-router-dom";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Home from "../pages/Home";
import Work from "../pages/Work";
import Todo from "../pages/Todo";

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="contact" element={<Contact />} />
        <Route path="work/" element={<Work />} />
        <Route path="work/:id" element={<Todo />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

1.Router.js파일에 한 줄 더 추가해준다.
work/:id id에 따라 Todo로 이동하게끔 설정한다.

data.js

export const data = [
  {
    id: 1,
    todo: "김",
  },
  {
    id: 2,
    todo: "박",
  },
  {
    id: 3,
    todo: "최",
  },
  {
    id: 4,
    todo: "이",
  },
  {
    id: 5,
    todo: "남궁",
  },
  {
    id: 6,
    todo: "선우",
  },
];

2.data값을 만들어주고, export로 바깥으로 내보낸다.

Work.js

import React from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import { data } from "../shared/data";

function Work() {
  return (
    <div>
      {data.map((item) => {
        return (
          <div key={item.id}>
            {item.id}
            <Link to={`/work/${item.id}`}> {item.todo}</Link>
          </div>
        );
      })}
    </div>
  );
}

export default Work;

3.import로 data를 받아온다.
4.data를 map을 돌려 id값과 todo값이 나오도록 한다.
5.Link로 감싸서 각 todo를 선택했을 때 그 id값에 따라 이동하도록 {}안에 백틱을 넣어 경로를 설정한다.

Todo.js

import React from "react";
import { useParams } from "react-router-dom";
import { data } from "../shared/data";

function Todo() {
  const params = useParams();
  const foundData = data.find((item) => {
    return item.id === parseInt(params.id);
  });
  return (
    <div>
      <h3>{foundData.todo}</h3>
    </div>
  );
}

export default Todo;

6.여기도 또한 import로 data값을 받아온다.
7.useParams를 이용하여 path에 있는 id값을 조회할 수 있게 해준다.
8.foundData라는 변수를 만들고, data.find를 써서 해당 조건에 해당하는 것들을 반환하도록 한다.
data의 각각 item의 id와 useParams를 통해 가져온 id값이 같은 애들만 foundData에 값을 담는다.
(이때 params의 값은 int이므로 parseInt를 사용해 정수로 바꿔준다.)
9.화면에 foundData의 todo값을 보여주도록 한다.
10.해당되는 data객체 값을 클릭 시, todo값이 나온다.