복잡한 라우팅 구성 예제

복잡한 라우팅 구성 예제

다음은 여러 기능을 조합한 좀 더 복잡한 라우팅 구성 예제입니다:

import { Routes, Route, Navigate } from 'react-router-dom';

function App() {
  const { isAuthenticated } = useAuth();

  return (
    <Routes>
      {/* 공개 라우트 */}
      <Route path="/" element={<PublicLayout />}>
        <Route index element={<Home />} />
        <Route path="about" element={<About />} />
        <Route path="products" element={<Products />} />
        <Route path="products/:id" element={<ProductDetail />} />
        <Route path="login" element={<Login />} />
        <Route path="register" element={<Register />} />
      </Route>

      {/* 인증된 사용자만 접근 가능한 라우트 */}
      <Route
        path="dashboard"
        element={isAuthenticated ? <DashboardLayout /> : <Navigate to="/login" />}
      >
        <Route index element={<Overview />} />
        <Route path="profile" element={<Profile />} />
        <Route path="settings" element={<Settings />} />
        <Route path="orders" element={<Orders />} />
        <Route path="orders/:id" element={<OrderDetail />} />
      </Route>

      {/* 관리자 전용 라우트 */}
      <Route
        path="admin"
        element={isAuthenticated && isAdmin ? <AdminLayout /> : <Navigate to="/login" />}
      >
        <Route index element={<AdminDashboard />} />
        <Route path="users" element={<UserManagement />} />
        <Route path="products" element={<ProductManagement />} />
      </Route>

      {/* 404 페이지 */}
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

라우터 v6 주요 훅 정리

React Router v6에서 제공하는 주요 훅과 그 용도를 정리하면 다음과 같습니다:

훅 설명

useParams()	URL 패턴에서 동적 매개변수 추출
useNavigate()	프로그래밍 방식으로 라우트 이동
useLocation()	현재 URL 정보와 상태 접근
useSearchParams()	URL 쿼리 매개변수 접근 및 수정
useMatch(pattern)	현재 URL이 지정한 패턴과 일치하는지 확인
useRoutes(routes)	객체 구조로 라우트 정의

실제 프로젝트 구조 예시

실제 프로젝트에서는 다음과 같은 디렉토리 구조로 라우팅을 구성할 수 있습니다:

src/
  ├── components/          # 공통 컴포넌트
  │   ├── Layout/
  │   ├── Navigation/
  │   └── ...
  ├── pages/               # 페이지 컴포넌트
  │   ├── Home/
  │   ├── About/
  │   ├── Products/
  │   ├── Dashboard/
  │   └── ...
  ├── routes/              # 라우팅 관련 설정
  │   ├── PrivateRoute.js  # 보호된 라우트 컴포넌트
  │   ├── PublicRoute.js   # 공개 라우트 컴포넌트
  │   └── index.js         # 메인 라우트 설정
  ├── App.js
  └── index.js

결론

React Router는 React 애플리케이션에서 페이지 이동과 URL 관리를 위한 강력한 도구입니다. 기본적인 라우팅에서부터 중첩 라우트, 동적 매개변수, 보호된 라우트 등 다양한 기능을 제공하여 복잡한 애플리케이션의 내비게이션 요구사항을 충족시킬 수 있습니다.

React Router를 활용하면 프로젝트의 구조를 더 명확하게 구성하고, 사용자 경험을 향상시킬 수 있습니다. 다음 단계로는 실제 백엔드 API와 연동하거나, 상태 관리 라이브러리(Redux, Context API 등)를 통합하여 더 복잡한 애플리케이션을 구축하는 방법을 학습하는 것이 좋습니다.