10차 강의 노트(고급 라우팅 패턴)

Next.js 패럴렐 라우트 & 인터셉팅 라우트

패럴렐 라우트 (Parallel Routes)

개념

여러 페이지나 컴포넌트를 하나의 화면에서 동시에 렌더링하는 기능입니다. 사이드바와 메인 콘텐츠를 함께 보여주는 것처럼 프레임워크와 유사한 역할을 합니다.

주요 특징

• 슬롯 시스템: @sidebar, @feed 같은 형태로 슬롯을 정의
• 자동 Props 전달: 각 슬롯의 page 컴포넌트가 부모 레이아웃에 자동으로 props로 전달됨
• 병렬 렌더링: 부모 레이아웃에서 여러 슬롯을 동시에 렌더링 가능
• URL 독립성: 슬롯(@~~)은 URL 경로에 영향을 주지 않음
• 무제한 슬롯: 필요한 만큼 슬롯 생성 가능
• 중첩 구조: 슬롯 하위에 추가 폴더 구조 생성 가능

사용 예시

app/
├── layout.tsx          // 부모 레이아웃
├── page.tsx           // 메인 페이지
├── @sidebar/          // 사이드바 슬롯
│   └── page.tsx
└── @feed/             // 피드 슬롯
    └── page.tsx

개발 시 주의사항

개발 모드에서 버그로 인해 제대로 동작하지 않을 수 있습니다. 이런 경우 개발 서버를 중단하고 다시 시작해보세요.

---

인터셉팅 라우트 (Intercepting Routes)

개념

사용자가 동일한 경로에 접근할 때, 특정 조건에 따라 원래 페이지 대신 다른 페이지를 보여주는 기능입니다.

조건 (고정)

클라이언트 사이드 내비게이션일 때만 인터셉팅이 작동합니다.

• ✅ 애플리케이션 내에서 링크 클릭으로 이동
• ❌ 직접 URL 입력이나 새로고침으로 접근

경로 표기법

(.)book/[id]      // 동일한 경로의 book/[id]를 인터셉트
(..)book/[id]     // 한 단계 상위 경로의 book/[id]를 인터셉트
(..)(..)book/[id] // 두 단계 상위 경로의 book/[id]를 인터셉트
(...)book/[id]    // app 폴더 루트의 book/[id]를 인터셉트

실제 사용 예시

Instagram과 같은 피드에서 게시물 클릭 시:

• 클라이언트 내비게이션: 모달로 게시물 표시
• 직접 접근/새로고침: 전체 화면으로 게시물 표시

구현 방법

주로 모달 컴포넌트와 함께 사용됩니다:

1. 피드에서 상세 링크 클릭 → 모달로 표시
2. 새로고침 또는 직접 URL 접근 → 전체 화면으로 표시

---

패럴렐 + 인터셉팅 라우트 조합

활용 시나리오

메인 화면에서 모달을 띄우는 복합적인 UI 패턴을 구현할 수 있습니다.

구조 예시

app/
├── layout.tsx
├── page.tsx
├── @modal/           // 모달 슬롯
│   ├── default.tsx   // 기본 상태 (빈 모달)
│   └── (.)detail/    // detail 경로 인터셉트
│       └── page.tsx  // 모달 내용
└── detail/
    └── page.tsx      // 실제 상세 페이지

동작 원리

1. 내부 링크 클릭: 모달 슬롯에서 인터셉팅된 페이지 렌더링
2. 직접 접근: 실제 detail 페이지로 이동
3. 새로고침: 모달이 닫히고 실제 페이지 표시

이 조합을 통해 사용자 경험을 해치지 않으면서도 깔끔한 모달 기반 내비게이션을 구현할 수 있습니다.

 

 

이 링크를 통해 구매하시면 제가 수익을 받을 수 있어요. 🤗

https://inf.run/4oB9v