[next 14 공식문서 부시기] 2.8 Parallel Routes(병렬 경로)

Parallel Routes (병렬 경로)

병렬 경로를 사용하면 동일한 레이아웃 내에서 하나 이상의 페이지를 동시에 또는 조건부로 렌더링할 수 있습니다. 이는 대시보드 및 소셜 사이트의 피드와 같이 앱의 매우 동적인 섹션에 유용합니다.

Slots

병렬 경로는 @folder 와 같은 형식으로 정의되는 slots 을 통해 생성됩니다.

슬롯은 공유 상위 레이아웃에 props 으로 전달됩니다. 아래의 예에서 app/layout.js 의 component 는 @analytics 및 @team 슬롯 props 을 받아 이를 children props 과 함께 병렬로 렌더링할 수 있습니다.

※ 그러나 슬롯은 경로 세그먼트가 아니며 URL 구조에 영향을 주지 않습니다. 예를 들어 /dashboard/@analytics/views의 경우 @analytics가 슬롯이므로 URL은 /dashboard/views가 됩니다.

Active state and navigation

기본적으로 Next.js는 각 슬롯의 활성 상태(또는 하위 페이지)를 추적합니다. 그러나 슬롯 내에서 렌더링되는 콘텐츠는 Navigation 유형에 따라 달라집니다.

• Soft Navigation: 클라이언트 측 탐색(client-side navigation) 중에 Next.js 는 부분 렌더링을 수행해 슬롯 내에서 하위 페이지 변경 시에도 다른 슬롯의 활성 하위 페이지가 URL이 변경되더라도 유지합니다. 다시 말해, 한 슬롯 내에서 하위 페이지가 변경되어도, 다른 슬롯들은 변경되지 않습니다.
• Hard Navigation: 완전한 페이지 로드(브라우저 새로 고침) 후에 Next.js는 현재 URL과 일치하지 않는 슬롯의 활성 상태를 확인할 수 없습니다. 대신 일치하지 않는 슬롯에 대해 default.js 파일을 렌더링하거나 default.js가 존재하지 않는 경우 404를 렌더링합니다.

default.js

초기 로드 또는 전체 페이지 다시 로드 중에 일치하지 않는 슬롯에 대한 대안으로 렌더링하도록 default.js 파일을 정의할 수 있습니다.