고급 라우팅 2: 가로채기 라우트 (Intercepting Routes)

가로채기 라우트(Intercepting Routes)는 사용자가 링크를 클릭했을 때 화면 전환을 "가로채서" 현재 보던 화면(Context)을 유지한 채 모달(Modal) 형태로 페이지를 띄워주는 고급 UX 기술입니다. 인스타그램 피드에서 사진을 클릭하면 피드 위에 사진이 모달로 뜨지만, 그 URL을 복사해서 새 창에 붙여넣으면 모달이 아닌 전체 화면 단독 페이지로 열리는 마법 같은 기능이 바로 이 기술을 통해 구현됩니다. 폴더 이름 앞에 (..) 를 붙여 상위 라우트를 가로챕니다.

가로채기 라우트(Intercepting Routes)는 사용자가 링크를 클릭했을 때 브라우저의 현재 상태(Context)를 잃지 않고, 라우트 이동을 "가로채서" 모달(Modal) 형태로 띄워주는 고급 UX 기술입니다.

인스타그램 피드에서 사진을 클릭하면 모달로 뜨지만, 새로고침 하거나 URL을 직접 공유하면 단독 페이지로 열리는 기능이 바로 이 기술로 구현됩니다. (..)folder 형태의 네이밍 컨벤션을 사용합니다.

// ========================================== // 📂 app/feed/layout.tsx // 병렬 라우트(@modal)와 결합하여 모달을 구현합니다. // ========================================== export default function FeedLayout({ children, modal // 이 슬롯에 가로챈 라우트 컴포넌트가 들어옵니다! }: { children: React.ReactNode, modal: React.ReactNode }) { return ( <> {children} {/* 피드 리스트 화면 */} {modal} {/* 모달 오버레이 영역 */} </> ) }