19. 라우팅과 네비게이션 - 2

동적 라우팅(Dynamic Routing) 구현 방법

동적 라우팅은 사용자가 요청한 URL에 따라 동적으로 컴포넌트를 렌더링하는 기능을 의미합니다. 이번 글에서는 React Router를 사용하여 동적 라우팅을 구현하는 방법에 대해 알아보겠습니다.

동적 라우팅의 개념

동적 라우팅은 일반적으로 URL의 일부분이 동적으로 변하는 경우에 사용됩니다. 예를 들어, 블로그 게시물의 상세 페이지나 제품 상세 정보 페이지와 같이 URL의 경로에 따라 다른 컴포넌트를 렌더링해야 할 때 유용합니다.

React Router를 사용한 동적 라우팅 구현

React Router를 사용하면 동적 라우팅을 쉽게 구현할 수 있습니다. 이를 위해 Route 컴포넌트의 path 속성에 동적인 매개변수를 사용하고, 해당 매개변수를 컴포넌트에서 props로 받아와 처리합니다.

// App.js

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './components/Home';
import ProductDetail from './components/ProductDetail';

const App = () => {
  return (
    <Router>
      <Switch>
        <Route path="/" exact component={Home} />
        <Route path="/products/:id" component={ProductDetail} />
      </Switch>
    </Router>
  );
};

export default App;

 

위 코드에서는 /products/:id 와 같은 형식으로 동적 매개변수를 포함한 URL을 정의하고 있습니다. 여기서 :id는 동적으로 변하는 제품 ID를 나타냅니다.

// ProductDetail.js

import React from 'react';

const ProductDetail = ({ match }) => {
  const productId = match.params.id;

  // productId를 사용하여 제품 상세 정보를 가져온다고 가정

  return (
    <div>
      <h2>Product Detail</h2>
      <p>Product ID: {productId}</p>
      {/* 제품 상세 정보를 표시하는 컴포넌트 */}
    </div>
  );
};

export default ProductDetail;

 

위 코드에서는 ProductDetail 컴포넌트에서 match.params.id를 통해 동적으로 변하는 제품 ID를 가져와 사용하고 있습니다.

마무리

동적 라우팅은 React 애플리케이션에서 유연하고 다양한 페이지를 구현하는 데 필수적입니다. React Router를 통해 동적 라우팅을 간편하게 구현할 수 있으며, 이를 통해 사용자 경험을 향상시키고 애플리케이션의 확장성을 높일 수 있습니다. 동적 라우팅을 활용하여 다양한 페이지를 구현해보세요!