인터셉팅 라우트

정호성·2025년 3월 17일

Next.js

목록 보기
18/18

인터셉팅 라우트 (Intercepting Routes)?

인터셉팅 라우트(Intercepting Routes)는 기존의 라우팅 흐름을 가로채어 특정 컴포넌트를 원하는 방식으로 렌더링할 수 있는 기능이다.

이를 통해 모달(modal) 기반 내비게이션을 구현하거나, 기존 페이지를 유지한 채 특정 콘텐츠만 변경하는 UI를 쉽게 만들 수 있다.

✅ 주요 특징

  • 현재 페이지의 컨텍스트를 유지한 채 새로운 화면을 렌더링 가능
  • 모달, 슬라이드 오버 패널 등의 UI 구현에 적합
  • 경로 변경 없이 상태를 변경하는 방식으로도 활용 가능

인터셉팅 라우트 사용법

인터셉팅 라우트는 .(점) 또는 (..)을 활용하여 특정 경로를 가로챌 수 있다.

📁 2.1 폴더 구조 예시

/app
 ├── layout.tsx
 ├── page.tsx
 ├── (.)book
 │   ├── [id]
 │   │   ├── page.tsx
 ├── book
 │   ├── [id]
 │   │   ├── page.tsx
profile
👨🏻‍💻 Front-End Developer

0개의 댓글