[React] 동적 라우팅과 중첩 라우팅

동적 라우팅과 중첩 라우팅은 복잡한 웹 애플리케이션을 구성할 때 매우 유용합니다. 이 두 가지 방법을 사용하면, 사용자의 요구와 애플리케이션의 구조에 맞춰 더 유연하고 효과적인 라우팅 구조를 만들 수 있습니다. React Router를 사용하여 동적 라우팅과 중첩 라우팅을 구현하는 방법에 대해 알아보겠습니다.

1. 동적 라우팅

동적 라우팅을 사용하면, URL의 일부를 변수로 취급하여, 다양한 URL에 대해 같은 컴포넌트를 렌더링할 수 있습니다. 예를 들어, 사용자가 다른 프로필 페이지에 접근할 때, 각 사용자의 고유 ID에 따라 다른 정보를 보여줄 수 있습니다.

예시: 사용자 프로필 페이지

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

function App() {
  return (
    <Routes>
      <Route path="/user/:userId" element={<UserProfile />} />
    </Routes>
  );
}

UserProfile 컴포넌트에서는 useParams 훅을 사용하여 URL에서 userId 파라미터를 추출할 수 있습니다.

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

function UserProfile() {
  let { userId } = useParams();

  return <div>User ID: {userId}</div>;
}

2. 중첩 라우팅

중첩 라우팅을 사용하면, 애플리케이션의 구조를 계층적으로 구성할 수 있습니다. 예를 들어, 메인 레이아웃 내부에 여러 페이지를 중첩하여 라우팅할 수 있습니다.

예시: 메인 레이아웃에 중첩된 페이지들

먼저, 메인 레이아웃과 그 안에 중첩될 페이지들을 정의합니다.

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

function MainLayout() {
  return (
    <div>
      <header>헤더</header>
      <main>
        <Outlet /> {/* 중첩된 라우트가 렌더링되는 위치 */}
      </main>
      <footer>푸터</footer>
    </div>
  );
}

Routes와 Route를 사용하여 중첩 라우팅을 설정합니다.

import React from 'react';
import { Routes, Route } from 'react-router-dom';
import MainLayout from './MainLayout';
import Home from './Home';
import About from './About';

function App() {
  return (
    <Routes>
      <Route path="/" element={<MainLayout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
      </Route>
    </Routes>
  );
}

이 구조에서 MainLayout 컴포넌트는 모든 페이지의 기본 레이아웃을 제공하며, Home과 About 페이지는 MainLayout 내부의 <Outlet /> 위치에 렌더링됩니다.

3. 결론

동적 라우팅과 중첩 라우팅을 사용하면, React 애플리케이션의 URL 구조를 더 유연하게 관리할 수 있습니다. 이를 통해, 사용자의 다양한 요구에 맞춘 경험을 제공하고, 애플리케이션의 구조를 명확하게 설계할 수 있습니다. React Router는 이러한 기능을 구현하기 위한 강력한 도구를 제공하며, 애플리케이션의 라우팅 시스템을 효과적으로 구축할 수 있도록 돕습니다.