[리액트] 동적 라우팅: 동적 URL 처리 방법

동적 라우팅은 URL의 일부를 변수처럼 사용하여 다양한 데이터를 표시할 때 매우 유용한 기능입니다. 예를 들어, 사용자의 ID에 따라 서로 다른 프로필 페이지를 표시할 수 있습니다. 다음은 React와 React Router를 사용하여 동적 라우팅을 구현하는 방법을 설명합니다.

동적 라우팅

동적 라우트는 URL의 일부를 변수처럼 사용하여 다양한 데이터를 표시할 때 유용합니다. 예를 들어, 사용자의 ID에 따라 프로필 페이지를 다르게 표시할 수 있습니다.

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

function App() {
  return (
    <Router>
      <nav>
        <ul>
          <li><Link to="/home">Home</Link></li>
          <li><Link to="/about">About</Link></li>
          <li><Link to="/user/1">User 1</Link></li>
          <li><Link to="/user/2">User 2</Link></li>
        </ul>
      </nav>
      <Switch>
        <Route path="/home">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/user/:id">
          <User />
        </Route>
        <Route path="/">
          <Home />
        </Route>
      </Switch>
    </Router>
  );
}

function Home() {
  return <h2>Home Page</h2>;
}

function About() {
  return <h2>About Page</h2>;
}

function User() {
  let { id } = useParams();
  return <h2>User ID: {id}</h2>;
}

export default App;

위 코드에서 주요 포인트만 간단히 설명하자면,

useParams:

• useParams 훅을 사용하여 URL 파라미터를 가져옵니다. 
• 예를 들어,  :id와 같이 Route의 path에 콜론(:)을 사용하여 URL의 일부를 변수로 설정할 수 있습니다.
• User 컴포넌트 내에서 useParams 훅을 사용하여 id 값을 가져와 해당 사용자 정보를 표시합니다.

동적 라우트 설정:

• Route 컴포넌트에서 path="/user/:id"와 같이 설정하여 동적 URL을 처리합니다. 이때 :id 부분이 동적으로 변경될 수 있는 부분입니다.

변수 사용:

• User 컴포넌트 내에서 useParams 훅을 사용하여 id 값을 가져오고, 해당 값을 이용해 사용자 정보를 표시합니다.

이와 같이 동적 라우팅을 사용하면 다양한 URL 패턴에 따라 유연하게 컴포넌트를 렌더링할 수 있습니다. 이를 통해 사용자 경험을 더욱 풍부하게 만들 수 있습니다.