화요일 주식도 장마감하고 오후 4시가 다 되어가는 이 시간에 커피를 마셔도 하품만나오고 왜이리 피곤하고 졸린지 모르겠다.
뭔가 잘못된거 같은데, 뇌가 죽은 기분이랄까? 최근들어 매일이 이런 나날이다.
각설하고, Intercepting Routes에 대해서 기록해 두려고 한다.
분명 나중에 써먹으려고 할때 기억이 안날거 같단말이지.
Intercepting Routes
말 그대로 라우팅을 가로채는? 행위랄까??
URL의 주소는 바뀌었지만 화면에 보여지는 내용은 변하지 않고 그 위에 모달창이 하나 새로 열리는 인터페이스를 많이 경험해 봤을거라고 생각한다.
난 SNS를 사용하지는 않지만, 대다수의 SNS가 이런식으로 동작한다.
작년말에 Twitter 클론을 위해서 여기저기 확인해보니, Login하는 모달도 이런방식으로 동작했었던것으로 기억한다.
인스타그램도 마찬가지인데, 즐라탄의 인스타그램을 들어가면 아래와같은 화면을 만나볼 수 있다.
로그인을 하지 않아서 게시물을 클릭해도 보이지는 않는다..;;
저기서 게시물 하나를 클릭하면 URL변하면서 모달창처럼 해당 게시물이 가장 상위에 올라오는 화면을 볼 수 있다. (당연히 위 사진과 같은 화면은 백그라운드에 위치함)
그리고 그 상태에서 새로고침하면 해당 게시물의 디테일 화면으로 넘어간다.
이런식으로 특정한 URL주소에 해당하는 요소를 렌더링하는 컴포넌트를 그리지 않고, 다른 컴포넌트를 렌더링하는 트릭(?)을 제공해주는게 Intercepting Routes다.
사실 어려운 개념도 아니긴하다, 인터럽트가 발생하는것과 비슷하다고 생각한다랄까??
How to use?
사용하는 방법은 생각보다 간단하다.
어떤 URL 주소를 Intercept 하고 싶은지 를 폴더 구조로 나타내 주기면하면 된다.
빨간색 박스로 표시해둔 부분이 바로 Intercepting Routes이고 설명을 추가하자면 (..)products/[id] 과 같이 URL이 prodcuts/[id] 형태가 될때, 해당 폴더내에 위치한 page.tsx를 렌더링 시켜줘! 라는 소리다.
그리고 여기서 (..)는 route 구조의 depth가 있을탠데, 몇 단계의 상위 depth를 기준으로 해줘 라는 소리다.
이 부분 관련해서는 공식문서가 잘 되어있어서 들고왔다.
위 문서처럼 내가 가로채고 싶은 URL의 depth가
1. 현재 나와 같은 레벨이냐?
2. 한단계 위 레벨이냐?
3. 두단계 위 레벨이냐?
4. 아니면 최상위 레벨이냐?
를 나타내는 컨벤션 이라고 생각하면 된다.
