app 디렉토리는 일반적으로 URL 경로에 따라서 폴더들이 계층을 가지고 있습니다. 하지만 개발자가 특정 폴더를 라우트 그룹이라고 표시를 하면 특정 폴더를 라우트 URL 패스에 포함되지 않도록 막을 수 있습니다.
이것을 사용하면 URL 경로 구조에 영향을 주지 않고 라우트 세그먼트와 프로젝트의 파일을 조직화 할 수 있게 해줍니다.
라우트 그룹을 사용하는 경우
라우트 그룹이 사용되는 경우는 다음과 같습니다.
- 사이트 섹션, 특정 의도나 특정 팀을 근거로 라우트를 조직화하는 경우
- 같은 라우트 세그먼트 레벨에서 레이아웃을 중첩시킬 수 있을 때
- 여러 루트 레이아웃을 포함하여 같은 세그먼트에 대해 다수의 중첩된 레이아웃을 만들기
- 공통 세그먼트에 라우트에 서브셋으로 레이아웃 추가하기
컨벤션
라우트 그룹은 (폴더이름)과 같이 써주면 자동으로 생성이 됩니다.
라우트 그룹 예시
라우트 그룹을 사용하면 좋은 예를 봅시다.
URL 경로에 영향을 미치지 않고 라우트 그룹화하기
URL 경로에 영향을 미치지 라우트를 조직화하고 싶다면, 관련된 라우트를 함께 유지하는 그룹으로 만들면 됩니다. 괄호 안에 있는 폴더는 URL로 제외됩니다.
|_ app
|_ (marketing)
|_ about
|_ page.tsx // about
|_ (shop)
|_ account
|_ page.tsx // account심지어 marketing과 shop이 같은 조상을 두고 있지만 서로 다른 레이아웃을 가질 수 있도록 만들 수도 있습니다.
|_ app
|_ (marketing)
|_ about
|_ layout.tsx
|_ page.tsx // about
|_ (shop)
|_ account
|_ layout.tsx
|_ page.tsx // account레이아웃에 특정 세그먼트 지정하기
특정 경로들을 레이아웃으로 선택하려면 새로운 라우트 그룹을 만들어야 하고 동일한 레이아웃을 공유하는 그룹으로 이것들을 이동해야 합니다. 라우트 그룹으로 묶이지 않는 것들은 레이아웃을 공유하지 않습니다.
|_ app
|_ (marketing)
|_ about
|_ layout.tsx
|_ page.tsx // about의 layout을 공유
|_ (shop)
|_ account
|_ layout.tsx
|_ page.tsx // account의 layout을 공유다수의 루트 레이아웃 만들기
다수의 루트 레이아웃을 만들면 최상단에 레이아웃을 지울 수 있고 각각의 라우트 그룹마다 레이아웃을 더할 수 있습니다. 이건 각각의 앱이 완전히 다른 UI나 UX를 가진 앱으로 부분적으로 나눠진 경우 사용하면 좋습니다. 각각의 루트 레이아웃에 <html>과 <body>를 더하면 됩니다.
|_ app
|_ (marketing)
|_ about
|_ layout.tsx
|_ (shop)
|_ account
|_ layout.tsx알면 좋은 내용
- 라우트 그룹은 특별한 의미가 있는 것이 아닙니다. 단지 URL 경로를 변경하지 않고 그룹화 짓는 일을 해줍니다.
- 서로 다른 라우트 그룹에 동일한 경로를 가진 폴더가 있으면 안됩니다. 예를 들면
(marketing)/about/page.tsx와(shop)/about/page.tsx가 있을 때 두 개 모두/about으로 경로가 일치되기 때문에 이슈가 발생합니다. - 최상위 레이아웃 없이 다중 루트 레이아웃을 사용하면 홈 화면 레이아웃이 라우트 그룹에 특정 하나로 정의가 되어야 합니다.
- 다수의 루트 레이아웃을 왔다갔다하는 이동은 풀 페이지 로딩을 만듭니다. 이건 오직 다수의 루트 레이아웃을 사용할 때 발생합니다.
그냥 뛰는 사람