라우트 그룹 활용하기

라우트 그룹은 Next.js의 App Router에서 제공하는 강력한 기능으로, 애플리케이션의 라우트 구조를 보다 효율적으로 구성할 수 있게 해줍니다.

이 절에서는 라우트 그룹의 개념, 사용 방법, 그리고 이점에 대해 알아보겠습니다.

라우트 그룹의 개념

라우트 그룹을 사용하면 폴더 구조를 URL 경로에 영향을 주지 않고 organizationSet할 수 있습니다.

이는 괄호 ()를 사용하여 폴더 이름을 묶음으로써 구현됩니다.

(group) 문법을 사용한 라우트 그룹 생성

라우트 그룹을 생성하려면 폴더 이름을 괄호로 감싸면 됩니다.

라우트 그룹 구조 예시

app/
├── (marketing)/
│   ├── about/
│   │   └── page.js
│   └── contact/
│       └── page.js
├── (shop)/
│   ├── products/
│   │   └── page.js
│   └── cart/
│       └── page.js
└── layout.js

이 구조에서 (marketing)과 (shop)은 라우트 그룹입니다.

이들은 URL 구조에 영향을 주지 않으며, 단순히 코드 organizationSet을 위한 것입니다.

라우트 그룹의 이점

코드 구조화 : 관련된 라우트를 논리적으로 그룹화할 수 있습니다.
공유 레이아웃 : 특정 그룹에 대한 레이아웃을 쉽게 적용할 수 있습니다.
URL 구조 유지 : 폴더 구조를 변경해도 URL은 그대로 유지됩니다.
코드 분할 : 자연스러운 코드 분할 지점을 제공합니다.

공유 레이아웃 구현

라우트 그룹을 사용하여 특정 섹션에 대한 공유 레이아웃을 쉽게 구현할 수 있습니다.

app/(shop)/layout.js

export default function ShopLayout({ children }) {
  return (
    <div>
      <nav>
        {/* 쇼핑 관련 네비게이션 */}
      </nav>
      {children}
    </div>
  )
}

이 레이아웃은 (shop) 그룹 내의 모든 페이지에 적용되지만, (marketing) 그룹의 페이지에는 영향을 주지 않습니다.

3장 레이아웃 컴포넌트와의 연관성

라우트 그룹은 3장에서 다룬 레이아웃 컴포넌트와 밀접하게 연관됩니다.

라우트 그룹을 사용하면 특정 섹션에 대한 레이아웃을 더 세밀하게 제어할 수 있습니다.

이는 레이아웃의 중첩과 함께 사용되어 복잡한 UI 구조를 효과적으로 관리할 수 있게 해줍니다.

실습 : 다국어 웹사이트의 라우트 구조 구현

다음 요구사항을 만족하는 다국어 웹사이트의 라우트 구조를 구현해보세요.

1. 지원 언어: 영어 (en), 한국어 (ko), 일본어 (ja)

2. 각 언어별로 다음 페이지 구현

홈 /
소개 /about
제품 /products

3. 각 언어 그룹에 대한 공통 레이아웃 적용

구현 단계

언어별 라우트 그룹 생성
각 그룹 내에 필요한 페이지 생성
언어별 공통 레이아웃 구현
언어 전환을 위한 간단한 네비게이션 구현

예시 폴더 구조

app/
├── (en)/
│   ├── layout.js
│   ├── page.js
│   ├── about/
│   │   └── page.js
│   └── products/
│       └── page.js
├── (ko)/
│   ├── layout.js
│   ├── page.js
│   ├── about/
│   │   └── page.js
│   └── products/
│       └── page.js
├── (ja)/
│   ├── layout.js
│   ├── page.js
│   ├── about/
│   │   └── page.js
│   └── products/
│       └── page.js
└── layout.js

언어별 레이아웃 예시

app/(en)/layout.js

export default function EnglishLayout({ children }) {
  return (
    <div>
      <nav>
        <a href="/en">Home</a>
        <a href="/en/about">About</a>
        <a href="/en/products">Products</a>
      </nav>
      <div>
        <a href="/en">English</a>
        <a href="/ko">한국어</a>
        <a href="/ja">日本語</a>
      </div>
      {children}
    </div>
  )
}

이 실습을 통해 라우트 그룹을 사용하여 복잡한 다국어 웹사이트의 구조를 효과적으로 관리하는 방법을 경험할 수 있습니다.

이는 국제화된 웹 애플리케이션을 개발할 때 매우 유용한 패턴입니다.

이전으로 다음으로