중첩 라우팅 소개

중첩 라우팅은 React Router의 강력한 기능 중 하나로, 복잡한 UI 구조를 효과적으로 관리할 수 있게 해줍니다.

이 절에서는 중첩 라우팅의 개념, 구현 방법, 그리고 활용 사례에 대해 알아보겠습니다.

중첩 라우팅의 개념

중첩 라우팅은 라우트 내부에 다른 라우트를 정의하는 방식입니다.

이를 통해 URL 구조와 UI 컴포넌트의 계층 구조를 일치시킬 수 있습니다.

중첩 라우팅을 사용하는 이유

UI 구조의 모듈화 : 복잡한 UI를 논리적인 단위로 분할할 수 있습니다.
코드 구조화 : 관련된 라우트와 컴포넌트를 함께 그룹화할 수 있습니다.
유지보수성 향상 : 각 섹션을 독립적으로 관리할 수 있어 유지보수가 용이합니다.
동적 레이아웃 : URL에 따라 레이아웃의 일부분만 변경할 수 있습니다.

중첩 라우트 정의 방법

React Router v6에서는 다음과 같이 중첩 라우트를 정의할 수 있습니다.

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 
function App() {
  return (
    <Router>
      <Routes>
        <Route path="dashboard" element={<Dashboard />}>
          <Route path="main" element={<DashboardMain />} />
          <Route path="profile" element={<Profile />} />
          <Route path="settings" element={<Settings />} />
        </Route>
      </Routes>
    </Router>
  );
}

이 예제에서 /dashboard/main, /dashboard/profile, /dashboard/settings와 같은 URL이 가능해집니다.

Outlet 컴포넌트 사용하기

Outlet 컴포넌트는 자식 라우트의 컴포넌트를 렌더링하는 플레이스홀더 역할을 합니다.

import { Outlet, Link } from 'react-router-dom';
 
function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <Link to="main">Main</Link>
        <Link to="profile">Profile</Link>
        <Link to="settings">Settings</Link>
      </nav>
      <Outlet /> {/* 자식 라우트의 컴포넌트가 여기에 렌더링됩니다 */}
    </div>
  );
}

Outlet을 사용하면 부모 라우트 컴포넌트 내에서 자식 라우트 컴포넌트가 어디에 렌더링될지 정확히 지정할 수 있습니다.

상대 경로를 사용한 링크 생성

중첩 라우팅에서는 상대 경로를 사용하여 링크를 생성할 수 있습니다.

import { Link, useMatch, useResolvedPath } from 'react-router-dom';
 
function CustomLink({ children, to, ...props }) {
  let resolved = useResolvedPath(to);
  let match = useMatch({ path: resolved.pathname, end: true });
 
  return (
    <div className={match ? "active" : ""}>
      <Link
        to={to}
        {...props}
      >
        {children}
      </Link>
    </div>
  );
}
 
function Dashboard() {
  return (
    <div>
      <nav>
        <CustomLink to=".">Dashboard Home</CustomLink>
        <CustomLink to="team">Team</CustomLink>
        <CustomLink to="projects">Projects</CustomLink>
      </nav>
 
      <Outlet />
    </div>
  );
}

이 예제에서 to=".", to="team", to="projects"와 같은 상대 경로를 사용하여 현재 URL을 기준으로 링크를 생성합니다.

중첩 라우팅을 활용한 복잡한 레이아웃

중첩 라우팅은 복잡한 레이아웃을 구현하는 데 매우 유용합니다.

예를 들어, 관리자 대시보드를 구현할 때 다음과 같이 사용할 수 있습니다.

function AdminLayout() {
  return (
    <div>
      <header>Admin Dashboard</header>
      <nav>
        <Link to="/admin/users">Users</Link>
        <Link to="/admin/products">Products</Link>
        <Link to="/admin/orders">Orders</Link>
      </nav>
      <Outlet />
      <footer>Admin Footer</footer>
    </div>
  );
}
 
function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="admin" element={<AdminLayout />}>
          <Route path="users" element={<Users />} />
          <Route path="products" element={<Products />} />
          <Route path="orders" element={<Orders />} />
        </Route>
      </Routes>
    </Router>
  );
}

이 구조에서는 관리자 페이지의 공통 레이아웃을 AdminLayout 컴포넌트에서 정의하고, 각 섹션별 컨텐츠는 자식 라우트로 처리합니다.

주의사항

경로 중복 주의 : 중첩 라우트를 정의할 때 경로가 중복되지 않도록 주의해야 합니다.
성능 고려 : 깊은 중첩은 컴포넌트 트리를 복잡하게 만들 수 있으므로, 필요 이상으로 깊게 중첩하지 않도록 합니다.
URL 구조 설계 : URL 구조를 사용자 친화적으로 설계하고, SEO를 고려해야 합니다.
코드 분할 : 대규모 애플리케이션에서는 동적 임포트를 사용하여 코드 분할을 구현하는 것이 좋습니다.
에러 처리 : 중첩된 구조에서도 적절한 에러 처리와 404 페이지 처리가 필요합니다.

<Route path="admin" element={<AdminLayout />}>
  <Route path="users" element={<Users />} />
  <Route path="products" element={<Products />} />
  <Route path="orders" element={<Orders />} />
  <Route path="*" element={<NotFound />} /> {/* 404 페이지 */}
</Route>

중첩 라우팅은 React 애플리케이션의 구조를 더욱 체계적으로 만들고, 복잡한 UI를 효과적으로 관리할 수 있게 해줍니다.

URL 구조와 컴포넌트 구조를 일치시킴으로써 개발자는 더 직관적이고 유지보수가 용이한 코드를 작성할 수 있습니다.

또한, 중첩 라우팅은 큰 애플리케이션을 작은 단위로 분할하여 관리할 수 있게 해주므로, 팀 단위의 개발에서도 매우 유용합니다.

각 팀이나 개발자가 특정 라우트와 관련된 컴포넌트를 독립적으로 개발하고 관리할 수 있기 때문입니다.

마지막으로, 중첩 라우팅을 사용할 때는 항상 사용자 경험을 고려해야 합니다. 너무 복잡한 URL 구조는 사용자를 혼란스럽게 할 수 있으므로, 가능한 한 간단하고 직관적인 구조를 유지하는 것이 중요합니다.

또한, 브레드크럼(Breadcrumb) 네비게이션을 제공하여 사용자가 현재 위치를 쉽게 파악할 수 있게 하는 것도 좋은 방법입니다.

이전으로 다음으로