Next.js 13 - 1. Routing - 1.9. Intercepting Routes

Chaewon Kang·2023년 4월 28일
0

Intercepting Routes (인터셉팅 루트)

인터셉팅 루트는 현재의 레이아웃 안에서 브라우저 URL을 마스킹하는 동안 새로운 루트를 보여줄 수 있도록 도와줍니다. 이는 현재 페이지의 컨텍스트를 유지하는 것이 중요한 경우에 유용합니다. 예를 들어, 하나의 할 일 목록을 편집하는 동안 모든 할 일 목록을 보고 있는 경우, 사이드 모달에 장바구니를 여는 경우, 또는 피드에서 하나의 이미지를 확대하는 경우 등에 해당합니다.

Convention (규약)

인터셉팅 루트는 (...)컨벤션을 통해 정의될 수 있습니다. 이는 상대 경로 .../와 비슷합니다. app디렉토리에 상대적인 경로를 생성하는 경우에도 (...)을 사용할 수 있습니다.

[feed]
├── (..)photo/[id]
│   └── page.tsx
└── layout.tsx
photo/[id]
├── page.tsx
└── layout.tsx

위의 예시에서, 유저의 피드에서 이미지 하나를 클릭하는 경우 클라이언트 사이드 네비게이션을 통해 사진을 오픈하게 됩니다. 그러나, 페이지를 새로고침하거나 공유하는 경우 디폴트 레이아웃이나 페이지 안에서 사진을 로드하게 됩니다.

Examples (예시들)

Modals (모달)

인터셉팅 루트는 모달을 생성하기 위해 평행 루트와 함께 사용될 수 있습니다.

모달을 생성하는 경우, 당신은 종종 다음과 같은 몇 가지 시행착오들에 대해 인지하고 있어야 합니다:

  • 모달은 URL을 통해서 접근할 수 없습니다
  • 모달은 페이지가 새로고침되면 꺼져야 합니다
  • 이전으로 네비게이션하는 것은 모달 뒤의 루트가 아니라 이전 루트를 향해야 합니다
  • 다음으로 네비게이션 하는 경우는 모달이 다시 열리면 안됩니다

한 루트를 인터셉팅 하는 것은 모달을 생성할 때 마주할 수도 있는 문제들을 해결할 수 있게 도와줍니다. 이를테면 URL을 통해 모달 컨텐츠를 공유할 수 있게 만들어 준다거나, 페이지가 새로고침 되는 경우 컨텍스트를 잃어버리는 것을 방지한다거나, 이전/다음 네비게이션을 하는 경우 모달을 닫고 여는 등의 상황들 말이죠.

shop
├── @products
│   └── page.tsx
├── @modal/(..)cart
│   └── page.tsx
└── layout.tsx
cart
├── page.tsx
└── layout.tsx

위의 예시에서, 제품 페이지에서 장바구니 버튼을 누르면 장바구니가 모달로 열리게 됩니다. 그렇지만 결제를 하는 경우 장바구니 또한 온전한 루트 또는 레이아웃을 통해 접근 가능해질 수 있습니다.

profile
문학적 상상력과 기술적 가능성

0개의 댓글