icon안동민 개발노트

App Router 구조 이해하기

 Next.js의 App Router는 폴더 구조를 통해 자연스럽게 중첩 라우트를 구현할 수 있게 해줍니다.

 이 절에서는 중첩 라우트의 구현 방법과 그 장점, 그리고 중첩 레이아웃과의 관계에 대해 알아보겠습니다.

중첩 라우트의 장점

  1. 구조화된 URL : 웹사이트의 계층 구조를 URL에 반영할 수 있습니다.
  2. 코드 구성 : 관련된 컴포넌트와 로직을 하나의 폴더에 묶어 관리할 수 있습니다.
  3. 공통 레이아웃 : 특정 라우트 그룹에 대한 공통 UI를 쉽게 적용할 수 있습니다.

폴더 구조를 통한 중첩 라우트 생성

 Next.js에서 중첩 라우트는 폴더 구조를 통해 자연스럽게 생성됩니다.

 예를 들어,

app/
├── dashboard/
│   ├── layout.js
│   ├── page.js
│   ├── settings/
│   │   └── page.js
│   └── analytics/
│       └── page.js
└── page.js

 이 구조는 다음과 같은 라우트를 생성합니다.

  • / : 루트 페이지
  • /dashboard : 대시보드 메인 페이지
  • /dashboard/settings : 대시보드 설정 페이지
  • /dashboard/analytics : 대시보드 분석 페이지

중첩 라우트 예제

 다음은 중첩 라우트를 구현하는 간단한 예제입니다.

// app/dashboard/layout.js
export default function DashboardLayout({ children }) {
  return (
    <div>
      <h1>Dashboard</h1>
      <nav>
        <a href="/dashboard">Overview</a>
        <a href="/dashboard/settings">Settings</a>
        <a href="/dashboard/analytics">Analytics</a>
      </nav>
      {children}
    </div>
  )
}
 
// app/dashboard/page.js
export default function DashboardPage() {
  return <h2>Dashboard Overview</h2>
}
 
// app/dashboard/settings/page.js
export default function SettingsPage() {
  return <h2>Dashboard Settings</h2>
}
 
// app/dashboard/analytics/page.js
export default function AnalyticsPage() {
  return <h2>Dashboard Analytics</h2>
}

 이 예제에서 DashboardLayout은 모든 대시보드 페이지에 공통으로 적용되는 레이아웃을 정의합니다.

중첩 레이아웃과의 관계

 중첩 라우트는 중첩 레이아웃과 밀접한 관계가 있습니다. 각 폴더 레벨에 layout.js 파일을 배치하여 해당 레벨과 그 하위 레벨에 공통으로 적용되는 UI를 정의할 수 있습니다. 이를 통해 다음과 같은 이점을 얻을 수 있습니다.

  1. 코드 재사용 : 공통 UI 요소를 상위 레이아웃에서 정의하여 중복을 줄일 수 있습니다.
  2. 일관된 사용자 경험 : 관련된 페이지들 간에 일관된 레이아웃을 유지할 수 있습니다.
  3. 성능 최적화 : 레이아웃 컴포넌트는 페이지 전환 시 리렌더링되지 않아 성능상 이점이 있습니다.

5장 페이지 및 레이아웃 컴포넌트와의 연결

 이 절에서 다룬 중첩 라우트 구현은 5장 "페이지 및 레이아웃 컴포넌트"와 밀접하게 연관됩니다. 5장에서는 이러한 구조를 더 깊이 탐구하며, 페이지 컴포넌트와 레이아웃 컴포넌트의 상호작용, 데이터 흐름, 그리고 더 복잡한 UI 패턴을 구현하는 방법을 학습하게 됩니다. 중첩 라우트의 개념을 잘 이해하면, 복잡한 애플리케이션 구조를 효과적으로 설계하고 구현할 수 있습니다.

실습 : e-commerce 사이트의 다단계 카테고리 구조 구현

 다음 요구사항을 만족하는 e-commerce 사이트의 라우트 구조를 구현해보세요.

  1. 홈페이지 /
  2. 카테고리 페이지 /categories
  3. 서브카테고리 페이지 /categories/[category]
  4. 제품 목록 페이지 /categories/[category]/[subcategory]
  5. 제품 상세 페이지 /products/[productId]

 구현 단계

  1. 필요한 폴더 구조를 생성합니다.
  2. 각 레벨에 적절한 layout.js와 page.js 파일을 생성합니다.
  3. 동적 세그먼트를 사용하여 카테고리, 서브카테고리, 제품 ID를 처리합니다.
  4. 각 페이지에 간단한 네비게이션 링크를 추가합니다.

 예시 폴더 구조

app/
├── categories/
│   ├── layout.js
│   ├── page.js
│   ├── [category]/
│   │   ├── page.js
│   │   └── [subcategory]/
│   │       └── page.js
├── products/
│   └── [productId]/
│       └── page.js
└── page.js

 이 실습을 통해 복잡한 중첩 라우트 구조를 설계하고 구현하는 방법을 경험할 수 있습니다.

 이는 실제 e-commerce 플랫폼과 같은 대규모 웹 애플리케이션의 라우팅 구조를 개발하는 데 필요한 스킬을 향상시키는 데 도움이 될 것입니다.

동적 라우트 생성Catch-all 세그먼트 사용