[next.js] 9. 경로 가로채기

next.js 공식 문서를 번역 후 공부한 내용을 정리한 자료이므로 자세한 내용은 공식 사이트 문서를 참고하세요

 

경로 가로채기는 현재 레이아웃 내에서 애플리케이션의 다른 부분의 경로를 로드할 수 있게 해주는 것입니다. 이 라우팅 패러다임은 사용자가 다른 컨텍스트로 전환하지 않고도 경로의 내용을 표시하려는 경우 유용합니다.

예를 들어, 피드(feed)에서 사진을 클릭할 때 사진을 모달(modal)로 표시하여 피드 위에 오버레이(overlay)로 표시할 수 있습니다. 이 경우 Next.js는 /photo/123 경로를 가로채고, URL을 가리고, /feed 위에 오버레이(overlay)로 표시합니다.

 

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

 

그러나 공유 가능한 URL을 클릭하거나 페이지를 새로 고침하여 사진으로 이동할 때는 모달 대신 전체 사진 페이지가 렌더링되어야 합니다. 경로 가로채기는 발생하지 않아야 합니다.

 

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

 

규칙 경로 가로채기는 (..) 규칙을 사용하여 정의할 수 있습니다. 이는 상대 경로 규칙 ../와 유사하지만 세그먼트에 대한 것입니다.

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

(.) : 동일한 수준의 세그먼트와 일치시킵니다.  (..) : 하나 위의 수준의 세그먼트와 일치시킵니다.  (..)(..) : 두 수준 위의 세그먼트와 일치시킵니다.  (...) : 루트 앱 디렉터리에서 세그먼트와 일치시킵니다.

예를 들어, (..)photo 디렉터리를 만들어 feed 세그먼트 내에서 photo 세그먼트를 가로채도록 할 수 있습니다.

 

경로 가로채기 폴더 구조

 

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

 

(개인정리) 즉, (..)라우트명 과 같이 폴더를 생성하면, 현재 경로의 상위에 있는 photo 라우트 경로의 페이지를 불러올 수 있다. 이 때 기존 경로는 가려지고, 불러와지는 라우트 경로가 URL 로 나타난다.

 

  예제

      모달 

경로 가로채기는 병렬 경로(Parallel Routes)와 함께 사용하여 모달을 생성하는 데 사용될 수 있습니다.

이 패턴을 사용하여 모달을 생성하면 다음과 같은 일반적인 문제를 해결할 수 있습니다:

- URL을 통해 모달 내용을 공유할 수 있음

- 페이지가 새로 고쳐지면 모달을 닫는 대신 컨텍스트를 보존할 수 있음

- 뒤로 이동 시 모달을 닫는 대신 이전 경로로 이동함

- 앞으로 이동 시 모달을 다시 열 수 있음

 

 

 위의 예시에서 @modal이 슬롯(slot)이므로 사진 세그먼트의 경로는 (..) 매처를 사용할 수 있습니다. 이는 사진 경로가 두 개의 파일 시스템 수준 위에 있지만 실제로는 세그먼트 수준이 하나 높기 때문입니다.

 

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

---

가로채기된 및 병렬 경로를 사용한 모달 예제를 확인하세요.

https://github.com/vercel-labs/nextgram

GitHub - vercel-labs/nextgram: A sample Next.js app showing dynamic routing with modals as a route.

 

---

(개인정리)  경로 가로채기는 쉽게 말해, 하나의 페이지 내부에서 상위에 있는 다른 라우트 경로의 페이지 컴포넌트를 불러오는기능이라고 이해된다. 이 때 상위 페이지를 불러온 이후 새로 고침을 하더라도 불러온 페이지 컴포넌트의 독립적인 경로로 나타나며, 페이지 뒤로가기를 실행하는 경우 페이지를 불러왔던 위치의 라우트 경로로 이동한다. 즉, 새로고침 이후 독립적인 경로가 나타난다는 것은 다음 페이지에 해당 컴포넌트의 라우트 경로가 히스토리 스택에 들어가 있다는 의미이다.