라우트 그룹
- Published on
- 라우트 그룹을 사용하여 Next.js 애플리케이션을 다양한 섹션으로 분할할 수 있습니다.
Table of Contents
app 디렉터리에서는 중첩된 폴더가 일반적으로 URL 경로에 매핑됩니다. 그러나 폴더를 라우트 그룹으로 표시하면 해당 폴더가 라우트의 URL 경로에 포함되는 것을 방지할 수 있습니다. 이를 통해 프로젝트 파일과 라우트 세그먼트를 논리적 그룹으로 구성하면서 URL 경로 구조에 영향을 주지 않게 됩니다.
라우트 그룹은 다음과 같은 목적으로 유용합니다.
- 라우트를 그룹으로 구성 예를 들어, 사이트 섹션, 목적 또는 팀별로.
- 같은 라우트 세그먼트 레벨에서 중첩 레이아웃 활성화:
규칙
라우트 그룹은 폴더 이름을 괄호로 묶어서 생성할 수 있습니다: (폴더이름)
예제
URL 경로에 영향을 주지 않고 라우트 구성하기
URL에 영향을 주지 않고 라우트를 구성하려면 관련된 라우트를 함께 유지하는 그룹을 생성합니다. 괄호 안의 폴더는 URL에서 생략됩니다. 예: (marketing) 또는 (shop)
(marketing) 및 (shop) 내부의 라우트는 동일한 URL 계층 구조를 공유하지만 각 폴더 내부에 layout.js 파일을 추가하여 각 그룹에 대해 다른 레이아웃을 생성할 수 있습니다.
특정 세그먼트에 레이아웃 적용하기
특정 라우트에 레이아웃을 적용하려면 새로운 라우트 그룹(예: (shop))을 생성하고 동일한 레이아웃을 공유하는 라우트를 그룹 안으로 이동합니다. 예: account 및 cart
그룹 밖의 라우트는 레이아웃을 공유하지 않게 됩니다. 예: checkout
다양한 루트 레이아웃 생성하기
여러 루트 레이아웃을 생성하려면 최상위 layout.js 파일을 제거하고 각 라우트 그룹 내부에 layout.js 파일을 추가합니다. 이는 완전히 다른 UI 또는 경험을 갖는 섹션으로 애플리케이션을 분할하는 데 유용합니다. <html> 및 <body> 태그는 각 루트 레이아웃에 추가되어야 합니다.
위의 예에서 (marketing) 및 (shop) 모두 자체 루트 레이아웃을 가지고 있습니다.
- 라우트 그룹의 명명은 구성을 위한 것 외에 특별한 의미가 없습니다. 그것들은 URL 경로에 영향을 주지 않습니다.
- 라우트 그룹을 포함하는 라우트는 다른 라우트와 동일한 URL 경로를 갖도록 해석되어서는 안됩니다. 예를 들어, 라우트 그룹이 URL 구조에 영향을 주지 않기 때문에
(marketing)/about/page.js및(shop)/about/page.js는 모두/about으로 해석되어 오류를 발생시킵니다.