React Router Dom - Dynamic Route, useParam

# 상세 페이지 구현하기

 

1. Dynamic Route란?

Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말한다. 

 

예를 들어, works 페이지에 여러개의 work가 보이고 우리가 work마다 독립적인 페이지를 가지도록 구현하려면 어떻게 해야할까?

아래 코드 처럼 페이지마다 각각 works/1, works/2, works/3 이런식으로 구현하는 것은 굉장히 비효율적일 것이다.

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;

 

 

 

2. Dynamic Route 설정하기

Works 페이지에 여러개의 Work가 있고, 그것을 클릭했을 때 각각의 상세페이지로 이동하게끔 구현해보기 위해선 일단 Work 라는 페이지가 먼저 있어야하기 때문에 Work 컴포넌트를 추가한다. 

// src/pages/Works.js

import React from "react";

const Works = () => {
  return <div>Works</div>;
};

export default Work;

 

 

 

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

export default Router;

이전과는 다르게 path에 works/:id 라고 path가 들어간다. :id 라는 것이 바로 동적인 값을 받겠다라는 의미이다.

그래서 works/1 로 이동해도 <Work /> 로 이동하고, works/2, works/3 …. works/100 모두 <Work /> 로 이동하게 해준다.

그리고 :id 는 useParams 훅에서 조회할 수 있는 값이 된다. 

 

 

 

 

 

# Dynamic Routes 와 useParam

 

1. query parameter 조회하기

useParam을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있다. 

 

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

 

 

Works.js

// 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;

 

 

work.js

// 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;

 

 

한번 브라우저 콘솔을 확인해보면 { } 형태이고, 그 안에 id와 value가 있는 것을 알 수 있다. 

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';
import Layout from './Layout';
import Work from '../pages/Work';

const Router = () => {
  return (
    <BrowserRouter>
      <Layout>
        <Routes>
          {/* 
						Routes안에 이렇게 작성합니다. 
						Route에는 react-router-dom에서 지원하는 props들이 있습니다.

						path는 우리가 흔히 말하는 사용하고싶은 "주소"를 넣어주면 됩니다.
						element는 해당 주소로 이동했을 때 보여주고자 하는 컴포넌트를 넣어줍니다.
				 */}
          <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>
      </Layout>
    </BrowserRouter>
  );
};

export default Router;

 

 

 

# 정리

• react-router-dom을 통해 Dynamic Route를 설정할 수 있다.
• Dynamic Route를 설정할때는 :id 로 설정하고, id 값은 useParams을 이용해서 각 컴포넌트에서 조회할 수 있다.