개념 설명
인터셉팅 라우트는 브라우저의 현재 레이아웃을 유지하면서 특정 경로로의 이동을 가로채어, 원래 페이지가 아닌 대체된 콘텐츠(주로 모달이나 오버레이)를 렌더링하는 기술임. 사용자가 링크를 클릭해 페이지를 이동할 때, 전체 페이지 전환 없이 맥락을 유지하며 정보를 보여주는 것이 핵심 원리임.
조건
- 클라이언트 사이드 탐색 시 활성화:
Link컴포넌트나router.push를 통한 이동 시에만 동작함. - 초기 접속/새로고침 시 비활성화: 브라우저에 URL을 직접 입력하거나 새로고침을 하면 인터셉팅이 발생하지 않고 실제 해당 경로의 정식 페이지로 이동함.
사용 상황 예시
가장 대표적인 사례는 인스타그램(Instagram)의 피드와 상세 페이지 구조임.
1. 피드 탐색 중: 게시물을 클릭하면 현재 피드 배경을 유지한 채 게시물 상세 내용이 모달(Modal)로 떠오름. (인터셉팅 발생)
2. 공유 및 새로고침: 해당 모달의 URL을 복사해 친구에게 보내거나 새로고침을 하면, 배경 피드 없이 게시물 상세 단독 페이지가 렌더링됨. (인터셉팅 미발생)
이외에도 쇼핑몰의 상품 상세 보기, 사진 갤러리의 이미지 확대 등에 널리 사용됨.
기본 문법 (폴더 구조 규칙)
인터셉팅 라우트는 폴더명 앞에 특수한 기호를 붙여 정의하며, 이는 파일 시스템의 상대 경로 참조 방식과 매우 유사함.
| 기호 | 설명 | 비고 |
|---|---|---|
(.) | 동일한 레벨의 경로를 가로챔 | ./와 매칭 |
(..) | 한 단계 상위 레벨의 경로를 가로챔 | ../와 매칭 |
(..)(..) | 두 단계 상위 레벨의 경로를 가로챔 | ../../와 매칭 |
(...) | 루트(app) 디렉토리 기준의 경로를 가로챔 | 최상위 경로 매칭 |
자주 하는 실수
- 경로 매칭 오류: 가로채려는 대상 폴더와 인터셉팅 폴더(
(.)folder)의 물리적 위치 관계를 잘못 파악하여 연결에 실패하는 경우 빈번함. - 레이아웃 중첩 혼동: 인터셉팅 라우트도 결국
layout.js의 영향을 받으므로, 부모 레이아웃과 모달 레이아웃이 겹쳐 디자인이 깨지는 현상 주의 필요. - 서버 사이드 렌더링 오해: 인터셉팅은 오직 클라이언트 측 전이에서만 작동하므로, 서버에서 직접 해당 경로로 접근할 때의 별도 페이지(
page.js) 구현을 누락하는 실수 발생.
핵심 요약
- 클라이언트 내비게이션 시 특정 경로를 가로채어 대체 콘텐츠를 보여주는 기능
- 새로고침 시에는 인터셉팅 없이 실제 해당 경로의 페이지를 독립적으로 렌더링
- 폴더명 앞
(.),(..)등의 기호를 통해 가로챌 경로의 상대 위치 지정
