동적 라우팅과 URL 파라미터 활용: 실제 데이터 기반 라우팅 구현 가이드

Table of Contents

동적 라우팅과 URL 파라미터 활용: 실제 데이터 기반 라우팅 구현 가이드

React 애플리케이션에서 동적 라우팅은 사용자의 행동이나 외부 데이터에 따라 다양한 화면을 동적으로 렌더링하는 핵심 기능입니다. 특히, URL 파라미터와 쿼리 스트링을 활용하면, 사용자가 특정 ID나 조건에 따라 맞춤형 콘텐츠를 볼 수 있도록 라우팅을 구성할 수 있습니다.

이번 포스팅에서는 동적 라우팅의 개념과 함께, React Router에서 제공하는 useParams, useLocation, useSearchParams 등의 훅을 활용해 실제 데이터 기반 라우팅을 구현하는 방법을 예제와 함께 상세히 설명합니다.

1. 동적 라우팅의 기본 개념

동적 라우팅은 URL 경로 내에 변수(파라미터)를 포함시켜, 경로에 따라 서로 다른 콘텐츠를 렌더링하는 기술입니다. 예를 들어, 쇼핑몰 애플리케이션에서 각 제품의 상세 페이지를 /products/:productId와 같은 URL 패턴으로 구성하면, productId에 따라 다른 제품 정보를 불러올 수 있습니다. 이와 같이 URL의 일부분을 변수로 활용하면, 동일한 컴포넌트를 재사용하면서 다양한 데이터를 동적으로 표시할 수 있습니다.

동적 라우팅을 구현하기 위해 React Router에서는 주로 Route 컴포넌트의 경로에 콜론(:)을 붙여 변수명을 지정합니다. 이렇게 지정된 변수는 나중에 useParams 훅을 통해 접근할 수 있습니다. 또한, 쿼리 스트링이나 URL의 다른 부가 정보를 활용할 때는 useLocation와 useSearchParams 훅이 유용하게 사용됩니다.

2. useParams: URL 파라미터 추출하기

useParams 훅은 동적 라우팅에서 URL 경로에 포함된 변수 값을 쉽게 추출할 수 있게 해줍니다. 예를 들어, URL 경로가 /products/:productId인 경우, useParams를 통해 productId 값을 받아와 해당 제품 정보를 불러올 수 있습니다.

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

import React from 'react';
import { useParams } from 'react-router-dom';

const ProductDetail = () => {
  // URL에서 productId 추출
  const { productId } = useParams();

  // 실제 프로젝트에서는 productId를 사용해 API 호출 등으로 제품 정보를 가져옵니다.
  return (
    <div>
      <h2>제품 상세 정보</h2>
      <p>선택한 제품 ID: {productId}</p>
      {/* 제품 정보 출력 */}
    </div>
  );
};

export default ProductDetail;

위 예제에서는 /products/123와 같은 URL로 접근할 경우, productId 값이 “123”으로 추출되어 화면에 출력됩니다. 이처럼 useParams는 동적 라우팅에서 필수적인 역할을 합니다.

3. useLocation: URL 전체 정보 확인하기

useLocation 훅은 현재 URL에 대한 정보를 담고 있는 객체를 반환합니다. 이 객체에는 pathname, search, hash 등의 속성이 포함되어 있으며, 이를 통해 페이지 전환 시 URL의 전체 상태를 확인할 수 있습니다.

예를 들어, 사용자가 특정 페이지에 접근했을 때 URL의 경로와 쿼리 스트링을 로그로 남기거나, 조건부 렌더링에 활용할 수 있습니다.

import React from 'react';
import { useLocation } from 'react-router-dom';

const ShowLocation = () => {
  const location = useLocation();

  return (
    <div>
      <h2>현재 URL 정보</h2>
      <p><strong>Pathname:</strong> {location.pathname}</p>
      <p><strong>Search:</strong> {location.search}</p>
      <p><strong>Hash:</strong> {location.hash}</p>
    </div>
  );
};

export default ShowLocation;

이 예제에서는 현재 URL의 경로, 쿼리 스트링, 해시 값을 화면에 표시하여, 개발자나 사용자가 페이지의 상태를 쉽게 확인할 수 있도록 합니다.

4. useSearchParams: 쿼리 스트링 관리하기

쿼리 스트링은 URL에 추가적인 정보를 전달하는 중요한 수단입니다. React Router v6에서는 useSearchParams 훅을 통해 쿼리 스트링을 쉽게 읽고, 업데이트할 수 있습니다. 이 훅은 URLSearchParams 객체와 업데이트 함수를 반환하며, 이를 활용해 조건부 필터링, 페이지네이션, 정렬 기능 등을 구현할 수 있습니다.

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

import React from 'react';
import { useSearchParams } from 'react-router-dom';

const SearchFilter = () => {
  // 쿼리 스트링 파라미터와 업데이트 함수 추출
  const [searchParams, setSearchParams] = useSearchParams();

  // 예: URL에서 "category" 파라미터 추출
  const category = searchParams.get('category') || '전체';

  // 쿼리 스트링 업데이트 함수
  const handleCategoryChange = (event) => {
    const newCategory = event.target.value;
    // 기존 파라미터 유지하면서 category 값 업데이트
    setSearchParams({ category: newCategory });
  };

  return (
    <div>
      <h2>상품 카테고리 필터</h2>
      <p>현재 선택된 카테고리: {category}</p>
      <select value={category} onChange={handleCategoryChange}>
        <option value="전체">전체</option>
        <option value="전자제품">전자제품</option>
        <option value="의류">의류</option>
        <option value="도서">도서</option>
      </select>
    </div>
  );
};

export default SearchFilter;

이 예제에서는 URL 쿼리 스트링에 포함된 category 파라미터를 읽어와, 사용자가 드롭다운 메뉴를 통해 카테고리를 변경할 때마다 URL을 업데이트합니다. 이렇게 하면 페이지를 새로 고침하지 않아도, 쿼리 스트링에 따라 콘텐츠가 동적으로 필터링되는 효과를 얻을 수 있습니다.

5. 실제 데이터 기반 동적 라우팅 구현 예제

이제 위에서 소개한 훅들을 통합하여, 실제 데이터 기반의 동적 라우팅 예제를 구성해보겠습니다. 아래 예제는 제품 목록 페이지에서 각 제품을 클릭하면 해당 제품의 상세 정보를 보여주는 시나리오입니다.

제품 목록 페이지 (Products.js):

import React from 'react';
import { Link } from 'react-router-dom';

const products = [
  { id: '101', name: '스마트폰' },
  { id: '102', name: '노트북' },
  { id: '103', name: '태블릿' }
];

const Products = () => {
  return (
    <div>
      <h2>제품 목록</h2>
      <ul>
        {products.map((product) => (
          <li key={product.id}>
            <Link to={`/products/${product.id}?ref=home`}>{product.name}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Products;

제품 상세 페이지 (ProductDetail.js):

import React from 'react';
import { useParams, useLocation, useSearchParams } from 'react-router-dom';

const ProductDetail = () => {
  // URL 파라미터에서 productId 추출
  const { productId } = useParams();
  // 현재 URL 정보 추출
  const location = useLocation();
  // 쿼리 스트링 파라미터 관리
  const [searchParams] = useSearchParams();
  const referrer = searchParams.get('ref');

  return (
    <div>
      <h2>제품 상세 정보</h2>
      <p><strong>제품 ID:</strong> {productId}</p>
      <p><strong>현재 경로:</strong> {location.pathname}</p>
      <p><strong>리퍼러:</strong> {referrer}</p>
      {/* 실제 API 호출 등을 통해 제품 정보를 불러와 렌더링 */}
    </div>
  );
};

export default ProductDetail;

라우트 구성 (App.js):

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import Products from './Products';
import ProductDetail from './ProductDetail';

const App = () => {
  return (
    <div style={{ padding: '20px' }}>
      <Routes>
        <Route path="/products" element={<Products />} />
        <Route path="/products/:productId" element={<ProductDetail />} />
      </Routes>
    </div>
  );
};

export default App;

위 예제에서는 제품 목록 페이지에서 각 제품 링크를 클릭하면, URL에 제품 ID와 함께 쿼리 스트링(예: ?ref=home)이 포함된 상세 페이지로 이동합니다. 상세 페이지에서는 useParams를 통해 제품 ID를, useLocation를 통해 현재 경로를, 그리고 useSearchParams를 통해 쿼리 스트링 값을 읽어와, 해당 제품에 대한 세부 정보를 동적으로 렌더링할 수 있습니다.

6. 결론

동적 라우팅과 URL 파라미터 관리는 사용자 경험을 크게 향상시키는 중요한 기술입니다. React Router의 useParams, useLocation, useSearchParams와 같은 훅들을 활용하면, URL 기반의 동적 콘텐츠 렌더링과 쿼리 스트링 관리가 매우 용이해집니다. 이번 포스팅에서는 동적 라우팅의 개념부터 시작해, 각 훅들의 사용법과 실제 데이터 기반의 라우팅 예제를 통해 실무에서 이를 어떻게 적용할 수 있는지 살펴보았습니다.

이러한 기술을 활용하면, 사용자의 요청에 따라 맞춤형 콘텐츠를 제공하는 복잡한 애플리케이션을 보다 효율적으로 구성할 수 있으며, SEO와 사용자 경험 모두를 개선할 수 있습니다. 앞으로도 React Router의 최신 기능들을 적극 활용하여, 동적 라우팅을 기반으로 한 강력한 웹 애플리케이션을 구축해 보시길 바랍니다.

spacexo