👉 라우팅을 구현할 수 있게 해주는 패키지
https://reactrouter.com/en/6.18.0

installation

yarn add react-router-dom 

npm install react-router-dom

configuration

Static Routing (정적 라우팅)

// shared/router.js
import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Home from "../pages/Home";
import About from "../pages/About";
import Contact from "../pages/Contact";
import Works from "../pages/Works";

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

export default Router;

route에는 react-router-dom에서 지원하는 props들이 있다.
path에는 우리가 이동하고 싶은 주소를 넣는다.
element에는 해당 주소로 이동했을 때 보여줄 컴포넌트를 넣는다.

// App.jsx
import React from "react";
import Router from "./shared/Router";

function App() {
  return <Router />;
}

export default App;

가장 최상단 컴포넌트인 App.jsx에 Router를 넣어준다.

Dynamic Routing (동적 라우팅)

👉 path에 유동적인 값을 넣어서 특정 페이지로 이동하게 구현하는 것

예를 들어 works 페이지에 여러개의 work가 있고 work마다 독립적인 페이지를 구현하려고 하려면 다음과 같은 코드를 추가하면 된다.

// shared/router.js
const Router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
        <Route path="/works" element={<Works />} />
				{/* 아래 코드를 추가해주세요. 👇 */}
        <Route path="/works/:id" element={<Work />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

works/:id라는 것이 동적인 값 (id) 을 받겠다는 의미이다.
works/1 works/2 works/3 모두 <Work /> 페이지로 이동한다.
그리고 :id는 useParams Hook을 통해 조회할 수 있는 값이 된다. (후술)

<Link>

👉 <Link> 는 사용자가 클릭하거나 탭하여 다른 페이지로 이동할 수 있는 요소이다. HTML에서 <a> 태그와 유사하다.

JSX 에서 <a>태그를 사용해야 한다면 반드시 <Link>를 사용해서 구현해야 한다.
왜냐하면 <a> 태그를 사용하면 페이지를 이동하면서 브라우저가 새로고침 되기 때문이다. 브라우저가 새로고침 되면 모든 컴포넌트가 다시 렌더링 되어야 하고, 우리가 redux나 useState를 통해 메모리상에 구축해놓은 모든 상태값이 초기화 된다. 이는 불필요한 움직임일 뿐만 아니라 성능에 악영향을 줄 수 있다.

function Works() {
  return (
    <div>
      <Link to={"/contact"}>contact로 이동</Link>
      <h3>할일 목록</h3>
      {data.map((item) => (
        <li key={item.id}>
          <Link to={`/works/${item.id}`}>
            {item.id} : {item.todo}
          </Link>
        </li>
      ))}
    </div>
  );
}

export default Works;

useNavigate

👉 useNavigate Hook은 프로그래밍 방식으로 navigate 할 수 있는 함수를 반환한다.
👉 어떤 이벤트가 발생했을 때 다른 페이지로 이동하고자 할 때 사용할 수 있다.

// src/pages/home.js
import { useNavigate } from "react-router-dom";

const Home = () => {
  const navigate = useNavigate();

  return (
    <button
      onClick={() => {
        navigate("/works");
      }}
    >
      works로 이동
    </button>
  );
};

export default Home;

useLocation

👉 useLocation Hook은 현재 위치 정보에 대한 object를 반환한다. 이 Hook은 현재 위치가 변경될 때마다 side effect를 다루려는 경우에 유용하다.
(페이지 안에서의 조건부 렌더링 등)

// src/pages/works.js
import { useLocation } from "react-router-dom";

function Works() {
  const location = useLocation();
  console.log(location); // 콘솔에 찍어보자
  return (
    <div></div>
  );
}

export default Works;

useParams

👉 useParams hook은 <Route path>에 의해 일치된 현재 URL에서 동적 파라미터의 키/값 쌍의 object를 반환한다.
👉 useParams는 path에 있는 동적 파라미터 (ex. :id)의 값을 조회할 수 있게 해주는 Hook 이다.

// src/pages/Work.js
import { useParams } from "react-router-dom";
import { data } from "../shared/data";

function Work() {
  const params = useParams();
  console.log(params); // 콘솔에 찍어보자
  const { id } = useParams();
  const work = data.find((item) => item.id === parseInt(id));
  return (
    <div>
      {work.id} : {work.todo}
    </div>
  );
}

export default Work;