Parallel Routes

Parallel Routes 는 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링 할 수 있습니다.

 

대시보드 및 소셜 사이트의 피드와 같이 매우 동적인 섹션에 Parellel Routes 가 유용하게 사용된다고 합니다.

 

 

위의 예시와 같이 team 과 analytics 페이지를 parallel routes 를 통해 동시에 렌더링 할 수 있다고 합니다.

Slots [@folder]

parallel routes 는 named slots 을 사용하여 생성된다고 합니다.

슬롯은 @folder 규칙으로 정의 됩니다.

위 예시의 파일 구조에서는 @analytics 와 @team 이라는 두 개의 슬롯을 정의합니다.

 

슬롯은 공유된 부모 레이아웃의 props 로 전달됩니다.

위의 예시에서 app/layout.js 는 @analytics 와 @team 슬롯을 props 로 받고

children props 와 함께 병렬로 렌더링 할 수 있습니다.

 

 

슬롯은 route segments 가 아니고 URL 구조에 영향을 주지 않습니다.

예를 들어, /@analytics/views 의 경우 @analytics 는 슬롯이므로 URL 은 /views 가 됩니다.

 

슬롯은 일반적인 Page component 와 결합되어 route segement 와 연관된 최종 페이지를 구성한다고 합니다.

 

Good to know

children prop 은 폴더에 매핑할 필요가 없는 암묵적인 슬롯입니다.

즉 app/page.js 는 app/@children/page.js 와 동일합니다.

 

Active state and navigation

기본적으로 Next.js 는 각 슬롯의 active state 를 추적합니다.

그러나 슬롯 내에서 렌더링되는 콘텐츠는 navigation type 에 따라 달라집니다.

 

Soft Navigation : Next.js 는 partial render 를 수행하여 슬롯 내의 하위 페이지를 변경하고 현재 URL 과 일치하지 않더라도 다른 슬롯의 active subpages 를 유지합니다.

 

Hard Navigation : full-page load 후 Next.js 는 현재 URL 과 일치하지 않는 슬롯의 active state 를 확인할 수 없습니다. 대신 현재의 URL 과 일치하지 않는 슬롯에 대해 default.js 파일을 렌더링하거나 default.js 가 없는 경우 404 를 렌더링합니다.

 

Good to know

일치하지 않는 경로에 대한 404 오류는 의도하지 않은 페이지에 병렬 경로가 실수로 렌더링 되는 것을 방지하는 데 도움이 됩니다.

 

default.js

initial load 또는 full-page reload 중에 일치하지 않는 슬롯에 대한 대체 수단으로 렌더링할 default.js 파일을 정의할 수 있습니다.

 

위와 같은 파일 구조에서 /settings 로 이동하게 되면, @analytics 슬롯의 상태는 유지한채로

@team 슬롯은 /settings 페이지를 렌더링하게 될 것입니다.

 

새로고침 시 Next.js 는 @analytics 에 대한 default.js 를 렌더링합니다.

만약 default.js 가 없다면 대신 404 페이지를 렌더링하게 됩니다.

 

또한, chdilren 은 암묵적 슬롯이므로 Next.js 가 부모 페이지의 활성 상태를 복구할 수 없을 때

children 에 대한 fallback 을 렌더링하기 위해 default.js 파일도 만들어야 합니다.

 

useSelectedLayoutSegment(s)

useSelectedLayoutSegment 와 useSelectedLayoutSegments 는 모두 parallelRoutesKey 매개변수를 허용하는데

이를 통해 슬롯 내에서 활성 경로 세그먼트를 읽을 수 있습니다.

 

Examples

Conditional Routes

 

Tab Groups

슬롯 내부에 레이아웃을 추가하여 사용자가 슬롯과 독립적으로 탐색할 수 있도록 할 수 있습니다.

이는 탭을 만드는 데 유용합니다.

Loading and Error UI

parallel Routes 는 독립적으로 스트리밍 할 수 있으므로 각 경로에 대해 독립적인 오류 및 로딩 상태를 정의할 수 있습니다.

 

Modals

Intercepting Routes 공부 후 작성 예정