[next 14 공식문서 부시기] 2.9 Intercepting Routes(경로 가로채기)

Intercepting Routes

경로를 가로채면 현재 레이아웃 내 애플리케이션의 다른 부분에서 경로를 로드할 수 있습니다. 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용할 수 있습니다.

예를 들어, feed 에서 photo 를 클릭하면 feed 에 오버레이되어 사진을 모달로 표시할 수 있습니다. 이 상황에서 Next.js 는 /photo/123 경로를 가로채서 URL 을 마스크하고 /feed 위에 오버레이합니다. 당연하게도 URL 을 클릭하거나 페이지를 새로 고쳐 photo 로 직접 이동하면 모달 대신 전체 사진 페이지가 렌더링됩니다.

기본 모양 및 규칙

현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있습니다.

• (.)동일한 수준 의 세그먼트 일치
• (..)한 수준 위 의 세그먼트와 일치
• (..)(..)두 수준 위의 세그먼트를 일치시키기 위해
• (...)루트 app 디렉토리 의 세그먼트를 일치시키기 위해

Modals

Parallel Routes 는 Intercepting Routes 와 함께 사용하여 모달을 생성할 수 있습니다. 이를 통해 다음과 같은 모달을 구축할 때 일반적인 문제를 해결할 수 있습니다

• URL을 통해 모달 콘텐츠 공유 가능합니다.
• 페이지를 새로고침할 때 모달을 닫는 대신 컨텍스트를 유지합니다.
• 이전 경로로 이동하지 않고 뒤로 탐색할 때 모달을 닫습니다.
• 앞으로 탐색 시 모달을 다시 엽니다.

공식문서 내용

---

참고

https://nextjs.org/docs/app/building-your-application/routing/intercepting-routes