React로 구현하는 동적 라우팅과 네비게이션

동적 라우팅이란 Routes의 경로에 특정 값을 넣어 해당 페이지로 이동할 수 있게 하는 것을 말합니다. 예를 들어, /product/1이라는 경로는 1번 상품의 상세 페이지를 보여주고, /product/2라는 경로는 2번 상품의 상세 페이지를 보여주는 식입니다. 이렇게 하나의 컴포넌트에서 다양한 페이지를 보여줄 수 있도록 하는 것이 동적 라우팅의 장점입니다.

 

react-router-dom을 사용한 동적 라우팅 구현하기

React에서 동적 라우팅을 구현하기 위해서는 react-router-dom이라는 라이브러리를 사용해야 합니다. 이 라이브러리는 React에서 웹 애플리케이션의 네비게이션을 쉽게 만들어주는 기능을 제공합니다. react-router-dom을 사용하려면 다음과 같이 설치해야 합니다.

npm install react-router-dom

 

설치가 완료되면, 다음과 같은 컴포넌트들을 사용할 수 있습니다.

 

BrowserRouter: 웹 애플리케이션의 최상위 컴포넌트로, HTML5 히스토리 API를 사용하여 페이지 전환을 처리합니다.

Route: 특정 경로에 해당하는 컴포넌트를 렌더링합니다. path와 component라는 속성을 받습니다.

Switch: 여러 개의 Route 중 하나만 렌더링하도록 합니다. 가장 처음 매칭되는 Route만 보여줍니다.

Link: 클릭하면 다른 경로로 이동할 수 있는 링크를 만듭니다. to라는 속성에 이동할 경로를 지정합니다.

useParams: 동적 라우팅에서 경로에 있는 특정 값을 가져올 수 있는 훅입니다. 예를 들어, /product/:id라는 경로에서 id값을 가져올 수 있습니다.

 

다음은 간단한 예제 코드입니다.

 

import React from "react";
import { BrowserRouter, Route, Switch, Link, useParams } from "react-router-dom";

// 메인 페이지 컴포넌트
function Main() {
  return (
    <div>
      <h1>메인 페이지</h1>
      <ul>
        <li>
          <Link to="/product/1">1번 상품</Link>
        </li>
        <li>
          <Link to="/product/2">2번 상품</Link>
        </li>
        <li>
          <Link to="/product/3">3번 상품</Link>
        </li>
      </ul>
    </div>
  );
}

// 상세 페이지 컴포넌트
function Detail() {
  // useParams 훅을 사용하여 id 값을 가져옵니다.
  const { id } = useParams();
  return (
    <div>
      <h1>{id}번 상품의 상세 페이지</h1>
      <p>이 상품은 {id}번 상품입니다.</p>
      <Link to="/">메인으로 돌아가기</Link>
    </div>
  );
}

// 앱 컴포넌트
function App() {
  return (
    // BrowserRouter 컴포넌트로 감싸줍니다.
    <BrowserRouter>
      {/* Switch 컴포넌트로 감싸줍니다. */}
      <Switch>
        {/* Route 컴포넌트로 경로와 컴포넌트를 지정합니다. */}
        {/* 동적 라우팅을 위해 :id라는 값을 넣어줍니다. */}
        <Route path="/product/:id" component={Detail} />
        {/* 메인 페이지는 exact 속성을 주어 정확히 일치하는 경우에만 렌더링하도록 합니다. */}
        <Route path="/" exact component={Main} />
      </Switch>
    </BrowserRouter>
  );
}

export default App;

 

이렇게 하면, 메인 페이지에서 각각의 상품 링크를 클릭하면 해당하는 상세 페이지로 이동할 수 있습니다. 또한, 상세 페이지에서는 useParams 훅을 사용하여 id값을 가져와서 화면에 보여줄 수 있습니다.

 

이번 글에서는 React에서 동적 라우팅을 구현하는 방법에 대해 알아보았습니다. 동적 라우팅은 웹 애플리케이션에서 자주 사용되는 기능이므로, 잘 익혀두면 좋을 것 같습니다 react-router-dom 라이브러리에는 다른 유용한 컴포넌트와 훅들도 많이 있으니, 공식 문서를 참고하시기 바랍니다.