Parallel Routes & Intercepting

병렬 라우팅과 라우트 가로채기 패턴을 학습합니다.

← App Router 예제로 돌아가기

🔀 Parallel Routes란?

같은 레이아웃에서 하나 이상의 페이지를 동시에 렌더링할 수 있는 기능입니다.@folder 형식으로 슬롯을 정의합니다.

app/
  dashboard/
    @analytics/page.tsx
    @team/page.tsx
    layout.tsx
    page.tsx

// layout.tsx
export default function Layout({
  children,
  analytics,
  team
}) {
  return (
    <>
      {children}
      {analytics}
      {team}
    </>
  );
}

📊 Parallel Routes 사용 사례

  • •대시보드: 여러 위젯을 독립적으로 로딩
  • •모달: 페이지 위에 모달 오버레이
  • •분할 뷰: 사이드바와 메인 콘텐츠 병렬
  • •A/B 테스트: 조건부 슬롯 렌더링

🎯 Intercepting Routes

특정 라우트를 가로채서 다른 UI를 표시합니다.

app/
  feed/
    (..)photo/[id]/page.tsx  // 가로채기
  photo/
    [id]/page.tsx            // 원본

// (..) = 상위 1단계
// (...)  = 루트부터
// (.)    = 같은 레벨

💡 실제 사용 예시: Instagram 스타일 모달

피드에서 사진 클릭
→ Intercepting Route로 모달 표시
→ URL은 /photo/123으로 변경
→ 뒤로가기 가능
직접 URL 접근
→ /photo/123 직접 접근
→ 전체 페이지로 표시
→ 공유 링크에 최적

✅ 장점

  • • 독립적인 에러 처리
  • • 독립적인 로딩 상태
  • • 조건부 렌더링 용이
  • • SEO 친화적

⚠️ 주의사항

  • • 복잡도 증가
  • • 과도한 사용 지양
  • • default.tsx 필요
  • • 상태 공유 어려움

💡 팁

  • • 슬롯은 선택적
  • • default.tsx로 폴백
  • • 모달에 활용
  • • 레이아웃 재사용

📚 학습 참고

Parallel Routes와 Intercepting Routes는 고급 기능으로, 복잡한 레이아웃이나 모달 UX가 필요한 경우에 사용합니다. 대부분의 경우 일반적인 라우팅으로 충분합니다.