[Next.JS] 경로 그룹(Route Groups)

Simon·2024년 5월 26일
0
post-thumbnail

Route Groups

App 디렉터리에서 중첩된 폴더는 일반적으로 URL 경로에 매핑된다. 하지만 폴더가 URL 경로에 포함되지 않도록 폴더를 경로 그룹(Route Group)으로 표시할 수 있다.

이를 통해 URL 경로 구조에 영향을 주지 않고 경로 세그먼트와 프로젝트 파일을 논리 그룹으로 구성할 수 있다.

경로 그룹의 유용한 경우

  • 경로를 그룹으로 구성하는 할때, 사이트 섹션, 팀 등
  • 동일한 경로 세그먼트 level에서 중첩 레이아웃 활성화

Convention

경로 그룹은 폴더 이름을 괄호로 묶어 생성할 수 있다: (foldername)

예시

URL 경로에 영향을 주지 않고 경로 구성
URL에 영향을 주지 않고 경로를 구성하려면 관련 경로를 함께 유지하는 그룹을 만든다. 괄호 안의 폴더는 URL에서 생략된다. (예시 (marketing) or (shop)).

(marketing) 및 (shop) 내부 경로가 동일한 URL 계층을 갖더라도 해당 폴더 안에 layout.js 파일을 추가하여 각 그룹마다 다른 레이아웃을 만들 수 있다.

특정 세그먼트를 레이아웃으로 선택

특정 경로를 레이아웃으로 선택하려면 새 경로 그룹(e.g. (shop))을 만들고 동일한 레이아웃을 공유하는 경로를 그룹으로 이동하면 된다. 그룹 외부의 경로(checkout)는 레이아웃을 공유하지 않는다.

여러 루트 레이아웃 만들기

여러 루트 레이아웃을 생성하려면 최상위 layout.js 파일을 제거하고 각 경로 그룹 내에 layout.js 파일을 추가한다. 완전히 다른 UI나 경험(experience)을 가진 섹션으로 애플리케이션을 분할하는 데 유용하다. 및 태그를 각 루트 레이아웃에 추가해야 한다.

알아두면 좋은 것

  • 경로 그룹의 이름은 조직(organization)을 위한 것 외에는 특별한 의미가 없다. URL 경로에 영향을 주지 않는다.
  • 경로 그룹을 포함하는 경로는 다른 경로와 동일한 URL 경로로 해석되어서는 안된다. 예를 들어 경로 그룹은 URL 구조에 영향을 미치지 않으므로, 예를 들어 (marketing)/about/page.js 및 (shop)/about/page.js는 모두 /about으로 확인되어 오류를 발생시킨다.
  • 최상위(root) layout 파일 없이 여러 루트 레이아웃을 사용하는 경우 home page.js 파일은 경로 그룹 중 하나에 정의되어야 한다. 예) app/(marketing)/page.js.
  • 여러 루트 레이아웃을 탐색하면 전체 페이지 로드가 발생한다(클라이언트 측 탐색과 반대). 예를 들어, app/(shop)/layout.js를 사용하는 /cart 경로에서 app/(marketing)/layout.js를 사용하는 /blog로 이동하면 전체 페이지 로드가 발생한다.

Next.js Route Groups 공식문서

profile
포기란 없습니다.

0개의 댓글