react-router-dom2

1. 상세 페이지 구현하기

• (1) Dynamic Route란?이번 챕터에서는 Dynamic Route에 대해서 배웁니다.예를 들어, works 페이지에 여러개의 work가 보이고 우리가 work마다 독립적인 페이지를 가지도록 구현하려면 어떻게 해야할까요? 아래 코드 처럼 페이지마다 각각 works/1, works/2, works/3 이런식으로 구현해야 할까요?아닙니다.

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

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

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

export default Router;

• 우리는 react-router-dom에서 지원하는 Dynamic Routes 기능을 이용해서 간결하게 처리할 수 있습니다.
• Dynamic Route란, 동적 라우팅이라고도 말하는데 path에 유동적인 값을 넣어서 특정 페이지로 이동하게끔 구현하는 방법을 말합니다.
• 우리는 저번 챕터에서 Router 컴포넌트를 통해서 URL 별로 어떤 컴포넌트로 페이지를 설정하고 직접 구현되는 것을 확인했습니다.

Router.js이동해서 Dynamic Routes를 설정해봅시다.

Works 페이지에 여러개의 Work가 있고, 그것을 클릭했을 때 각각의 상세페이지로 이동하게끔 구현해봅시다. 일단 Work 라는 페이지가 먼저 있어야겠죠? Work 컴포넌트를 추가해주세요.

// src/pages/Work.js

import React from "react";

const Work = () => {
  return <div>Work</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 훅에서 조회할 수 있는 값이 됩니다. 이 부분은 잠시 뒤에서 더 자세하게 다룹니다.

2. Dynamic Routes와 useParam

• (1) query parameter 조회하기

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

  우리가 설정한 예제 코드에서도 Work 페이지 컴포넌트를 모두 동일하게 렌더링하겠죠? 하지만 useParam을 이용하면 같은 컴포넌트를 렌더링하더라도 각각의 고유한 id 값을 조회할 수 있습니다.

  // src/pages/Work.js
  
  import React from "react";
  // 아래 코드를 추가해주세요. 👇
  import { useParams } from "react-router-dom";
  
  const Work = () => {
  	// 아래 코드를 추가해주세요. 👇
    const param = useParams();
  		// 훅을 사용해서 생성한 param을 콘솔에 찍어봅시다.
    console.log(param);
    return <div>Work</div>;
  };
  
  export default Work;
  

  한번 브라우저 콘솔을 확인해볼까요? { } 형태이고, 그 안에 id와 value가 있는 것을 알 수 있습니다. param 값은 우리가 앞으로 꽤 유용하게 사용할 수 있는 소스 입니다. 훅 사용방법에 익숙해지도록 연습 하시길 바랍니다.
• 아래 코드를 추가해볼까요? useParams이라는 훅을 사용해봅시다. useParams 은 path의 있는 id 값을 조회할 수 있게 해주는 훅 입니다. 그래서 만약에 우리가 works/1로 이동하면 1 이라는 값을 주고, works/100으로 이동하면 100 이라는 값을 사용할 수 있게 해줍니다.
• Dynamic Routes를 사용하면 element에 설정된 같은 컴포넌트를 렌더링하게 됩니다.

3. 정리

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