병렬 라우트(parallel routes)와 인터셉팅 라우트(intercepting routes)란 무엇인가요?

Question

Accepted Answer

이들은 정교한 UI 레이아웃을 위한 두 가지 고급 App Router 기능입니다. 폴더 컨벤션 문법을 공유합니다. ## 병렬 라우트 (@folder) — 하나의 레이아웃에 여러 페이지 렌더링 병렬 라우트는 단일 레이아웃이 **여러 독립적인 라우트 "슬롯"을 동시에** 렌더링하게 해 줍니다. 각각 자체 로딩/에러 상태를 가집니다. `@name` 폴더로 슬롯을 정의합니다: ```text app/ layout.tsx @team/page.tsx → 하나의 슬롯 @analytics/page.tsx → 또 다른 슬롯 ``` ```tsx // app/layout.tsx — 슬롯은 이름 있는 props로 전달됨 export default function Layout({ children, team, // ← @team 슬롯 analytics, // ← @analytics 슬롯 }: { children: React.ReactNode; team: React.ReactNode; analytics: React.ReactNode }) { return <>

{children} ; } ``` 각 슬롯은 **독립적으로** 네비게이션하고 로드됩니다. 패널이 따로 업데이트되는 **대시보드**나, 두 섹션을 동시에 보여 줄 때 좋습니다. ## 인터셉팅 라우트 ((.)folder) — 현재 페이지를 떠나지 않고 라우트를 오버레이 인터셉팅 라우트는 네비게이션을 "가로채" 전체 페이지 대신 **현재 컨텍스트에서**(예: 모달) 렌더링하면서도 여전히 실제로 공유 가능한 URL을 갖게 해 줍니다. ```text app/feed/page.tsx app/feed/(..)photo/[id]/page.tsx → feed에서 이동할 때 /photo/[id]를 가로챔 app/photo/[id]/page.tsx → 전체 페이지 (직접 방문 / 새로고침 시) ``` ```text feed에서 사진 클릭 → feed 위에 모달로 열림(가로채짐), URL = /photo/123 그 URL을 새로고침/공유 → 전체 사진 페이지 렌더링 (가로채기 없음) ``` 가로채기 표식(`(.)` 같은 수준, `(..)` 한 단계 위, `(...)` 루트)이 어느 세그먼트를 가로챌지 제어합니다. 이것이 바로 인스타그램 스타일의 "사진이 모달로 열리지만 자체 URL을 갖는" 패턴이 동작하는 방식입니다. ## 왜 중요한가 병렬 라우트는 복잡하고 독립적으로 로드되는 다중 패널 레이아웃(대시보드)을 깔끔하게 가능하게 하고, 인터셉팅 라우트는 다른 방법으로는 만들기 까다로운 "실제 URL을 가진 모달" 패턴(공유 가능, 새로고침 안전, 뒤로 가기 친화적)을 제공합니다. 고급 기능이지만, 이전에는 상당한 수동 routing/상태 작업이 필요했던 실제 UX 문제 — 독립적인 패널과 컨텍스트 오버레이 — 를 해결합니다.