React - React Router Dom(Dynamic Route, useParam)

Dynamic Route

동적 라우팅이라고도 한다. 라우팅 된 컴포넌트의 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말한다.

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

const Router = () => {
  return (
    <BrowserRouter>
      <Routes>

				{/* 이렇게 하면 될까요? */}
        <Route path="/" element={<Home />} />
        <Route path="/works/1" element={<Works />} />
				<Route path="/works/2" element={<Works />} />
				<Route path="/works/3" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

이런 사례들에 필요하다.

Dynamic Route 설정하기

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 />} />
				{/* 아래 코드를 추가해주세요. 👇 */}
        <Route path="works/:id" element={<Works />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Router;

이렇게 Work컴포넌트의 path로 works/:id라는 코드를 넣으면, 이 말이 곧 path를 동적으로 받겠다는 의미가 된다. 그래서 works/1, works/2, ... workd/100 모두 <Work>컴포넌트로 이동하게 된다.

useParams

query parameter 조회하기

Dynamic Routes를 사용하면 element에 설정된 같은 컴포넌트를 랜더링하게 된다.

<Route path="works/:id" element={<Work />} />

아래의 코드를 추가하면 useParams라는 훅을 사용했을 때, path에 있는 id값을 조회할 수 있게 해준다. 그래서 만약 우리가 works/1로 이동하면 1이라는 값을 주고, works/100으로 이동하면 100이라는 값을 사용할 수 있게 된다.

// src/pages/Works.js

import React from 'react';
import { Link, useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Works() {
  return (
    <div>
      {data.map((work) => {
        return (
          <div key={work.id}>
            <div>할일: {work.id}</div>
            <Link to={`/works/${work.id}`}>
              <span style={{ cursor: 'pointer' }}>➡️ Go to: {work.todo}</span>
            </Link>
          </div>
        );
      })}
    </div>
  );
}

export default Works;

위의 코드를 곰곰히 읽어보자. span태그로 쓰여있는 부분을 클릭하면 path의 값이 변하면서 페이지 이동을 하게 된다.

// src/pages/Work.js

import React from 'react';
import { useParams } from 'react-router-dom';

const data = [
  { id: 1, todo: '리액트 배우기' },
  { id: 2, todo: '노드 배우기' },
  { id: 3, todo: '자바스크립트 배우기' },
  { id: 4, todo: '파이어 베이스 배우기' },
  { id: 5, todo: '넥스트 배우기' },
  { id: 6, todo: 'HTTP 프로토콜 배우기' },
];

function Work() {
  const param = useParams();

  const work = data.find((work) => work.id === parseInt(param.id));

  return <div>{work.todo}</div>;
}

export default Work;

이동한 컴포넌트에서는 URL에서 동적으로 변하기로 한 ":id" 부분을 useParams라는 훅을 사용하여 params라는 변수로 받고 있는데 이를 활용하여 랜더링 하는 부분을 동적으로 다르게 처리할 수 있다.

즉 순서를 나누자면

1. 라우터 파일에서 id를 동적으로 처리할 것임을 명시
2. 페이지 이동을 시작하게 되는 컴포넌트에서 특정 Link태그를 선택
3. map함수로 생성된 id값에 의해서 서로 다른 URL로 페이지 이동
4. 이동한 페이지에서 / 다음부분 :id를 useParams 훅으로 받아옴
5. 컴포넌트 내에서 활용하면서 마치 각기 서로 다른 컴포넌트인 것처럼 동적으로 랜더링함

이렇게 요약할 수 있겠다.