[NextJS 13] Routing - Intercepting Routes(라우트 가로채기)

라우트 가로채기는 현재 레이아웃 안에서 라우트를 로드하면서 현재 페이지의 컨텍스트를 유지할 수 있게 해줍니다. 이러한 라우팅 패러다임은 특정 경로를 "가로채서" 다른 경로를 표시하고 싶을 때 유용합니다.

예를 들어, feed 내부에서 사진을 클릭할 때 feed 위에 모달이 나타나야 합니다. 이 경우, Next.js는 /feed 경로를 가로채고 이 URL을 /photo/123 대신에 보여줍니다.

그러나 공유 가능한 URL을 클릭하거나 페이지를 새로고침하는 경우와 같이 사진에 직접 이동할 때는 모달 대신 전체 사진 페이지가 렌더링되어야 합니다. 

Convention

라우트 가로채기는 (..) 구문을 사용하여 정의할 수 있습니다. 이는 상대 경로 표기법인 ../과 유사하지만 세그먼트에 대해 적용됩니다.

다음을 사용할 수 있습니다:

• (.)는 동일한 수준의 세그먼트와 일치합니다.
• (..)는 한 수준 위의 세그먼트와 일치합니다.
• (..)(..)는 두 수준 위의 세그먼트와 일치합니다.
• (...)는 루트 앱 디렉토리부터의 세그먼트와 일치합니다.

예를 들어, (..)photo 디렉토리를 생성함으로써 피드 세그먼트 내부에서 사진 세그먼트를 가로챌 수 있습니다.

(..) 규칙은 파일 시스템이 아닌 라우트 세그먼트를 기반으로 합니다.

Examples

Modals

라우트 가로채기는 병렬 라우트와 함께 사용하여 모달을 만드는 데 사용할 수 있습니다.

이러한 패턴을 사용하여 모달을 만드는 것은 모달을 사용할 때 발생하는 몇 가지 일반적인 문제를 해결할 수 있습니다. 이를 통해 다음과 같은 작업을 수행할 수 있습니다:

• URL을 통해 모달 내용을 공유할 수 있게 함
• 페이지를 새로 고침할 때 모달을 닫지 않고 컨텍스트를 보존함
• 이전 경로로 이동하는 대신 뒤로 가기로 모달을 닫을 수 있음
• 앞으로 가기로 모달을 다시 열수 있음

위의 예에서 photo 세그먼트의 경로는 @modal이 세그먼트가 아니라 슬롯이기 때문에 (..) 매처를 사용할 수 있습니다. 즉, 파일 시스템 수준이 두 개 더 높음에도 불구하고 사진 경로는 세그먼트 수준이 한 개만 더 높습니다.

다른 예시로는 상단 네비게이션 바에서 로그인 모달을 열면서 동시에 별도의 /login 페이지도 가질 수 있습니다. 또는 쇼핑 카트를 측면 모달로 열 수도 있습니다.

가로채기 와 병렬 라우트를 사용한 모달 예시를 확인하세요.

느낀점

NextJS에 내제된 기능으로만 모달을 만들 수 있다는게 굉장히 편리해졌습니다. 특히 모바일 웹 뷰에서 모달의 작동 방식과 안드로이드의 하드웨어 백버튼 클릭시 발생하는 사용자 경험이 다르게 작동해서 인지 부조화를 느끼는 경우가 많았는데 모달자체가 URL로 관리 되기 때문에 일관적인 UI/UX 만들 수 있습니다.

원본

Routing: Intercepting Routes | Next.js