🚀 Next.js 심화 5장: Parallel Routes & Intercepting Routes — URL이 살아있는 모달의 비밀

📋 목차

• 📌 이 문서를 읽기 전에
• 🤔 왜 알아야 하는가
• 🏗️ 비유로 먼저 이해하기
• 🧩 Parallel Routes — 하나의 화면에 여러 슬롯 배치하기 🟢
• 🎯 Intercepting Routes — URL은 유지하고 컨텍스트만 바꾸기 🟡
• 🚀 둘의 조합: URL을 가진 모달 (Instagram 스타일) 🔴
• 💥 에러 해결 카탈로그
• 🏁 이번에 배운 내용 총정리
• 📝 마무리 퀴즈
• 🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 18분 (전체) / 핵심 파트만: 10분

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

• 영철(신입): "인스타그램 피드에서 사진 클릭하면 URL이 /p/ABC123으로 바뀌면서 모달이 뜨는데, 그 상태로 새로고침하면 모달 없이 전체 페이지로 열리잖아요. 이거 어떻게 구현하는 거예요? useState로 모달 열고 닫는 건 URL이 안 바뀌어서 링크 공유가 안 되고..."
• 영호(리드): "바로 Parallel Routes + Intercepting Routes 조합이에요. @modal 슬롯과 (..) 인터셉터를 조합하면, 같은 URL에서 네비게이션했을 때는 모달로, 직접 접근하거나 새로고침했을 때는 전체 페이지로 자동 분기돼요. URL 공유도 되고, 뒤로가기도 자연스럽고."

🗺️ 이 문서의 흐름
Parallel Routes(슬롯 개념) → Intercepting Routes(URL 가로채기) → 두 기능 조합한 URL 모달

🎯 이 문서를 다 읽으면 할 수 있는 것

• @folder 문법으로 레이아웃에 독립적인 슬롯을 추가할 수 있다
• (..)route 문법으로 URL은 유지하면서 컨텍스트를 바꿀 수 있다
• Instagram/Pinterest 스타일의 URL이 살아있는 모달을 구현할 수 있다

🤔 왜 알아야 하는가

일반적인 모달 구현의 문제점을 생각해봐:

// 기존 방식: useState로 모달 제어
const [isOpen, setIsOpen] = useState(false)
<button onClick={() => setIsOpen(true)}>게시글 보기</button>
<Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
  <PostDetail />
</Modal>

이 방식의 문제:

1. URL이 안 바뀌어 — 모달을 친구에게 공유할 수 없음
2. 새로고침하면 사라져 — UX 일관성 없음
3. 뒤로가기가 이상해 — 모달 닫는 게 아니라 이전 페이지로 가버림
4. SEO 불가 — 모달 내용이 크롤링 안 됨

Parallel + Intercepting Routes 조합이 해결하는 것:

• 모달이 열릴 때 URL이 실제로 변경됨 (/posts → /posts/123)
• URL을 직접 입력하거나 새로고침하면 전체 페이지로 열림
• 뒤로가기하면 모달만 닫힘 (피드로 돌아옴)
• 모달 URL을 공유하면 받은 사람도 해당 게시글에 직접 접근 가능

🏗️ 비유로 먼저 이해하기

🧒 5살에게 설명한다면?
회사 건물에 비유하면: 보통 사무실(page.tsx)은 한 층에 하나야.
그런데 Parallel Routes는 같은 층에 방이 여러 개야. 팀장 방이랑 회의실이 동시에 열려있는 것처럼.

Intercepting은 "회의실 예약"이야. 보통은 3층 회의실 직접 찾아가야 해. 근데 예약 시스템을 통하면 현재 있는 곳(2층 사무실)에서 화상 회의(모달)를 할 수 있어. 같은 방 번호(URL)인데 보이는 것이 달라.

Parallel Routes 시각화:

app/
  layout.tsx          ← { children } + { @team } + { @analytics } 세 슬롯을 동시에 렌더
  page.tsx            ← children 슬롯
  @team/
    page.tsx          ← @team 슬롯 내용
  @analytics/
    page.tsx          ← @analytics 슬롯 내용

Intercepting Routes 기호:

🧩 Parallel Routes — 하나의 화면에 여러 슬롯 배치하기 🟢

🎯 이 섹션을 읽고 나면:

• @slot 폴더 문법으로 레이아웃에 독립적인 병렬 영역을 만들 수 있다
• default.tsx가 왜 필요한지 이해한다

Parallel Routes는 하나의 URL에서 여러 독립적인 영역(슬롯)을 동시에 렌더링하는 기능이야.

// app/(dashboard)/layout.tsx
// @team, @analytics 두 슬롯을 props로 받음
 
interface DashboardLayoutProps {
  children: React.ReactNode
  team: React.ReactNode       // @team 슬롯
  analytics: React.ReactNode  // @analytics 슬롯
}
 
export default function DashboardLayout({
  children,
  team,
  analytics,
}: DashboardLayoutProps) {
  return (
    <div className="dashboard">
      <main>{children}</main>
      <aside className="team-panel">{team}</aside>
      <section className="analytics-panel">{analytics}</section>
    </div>
  )
}

app/(dashboard)/
  layout.tsx           ← 위의 레이아웃
  page.tsx             ← children 슬롯 (기본 대시보드 내용)
  @team/
    page.tsx           ← team 슬롯 내용 (팀원 목록)
    default.tsx        ← ⚠️ 필수! 슬롯에 매칭 페이지 없을 때 fallback
  @analytics/
    page.tsx           ← analytics 슬롯 내용 (통계)
    default.tsx        ← ⚠️ 필수!

default.tsx가 왜 필수인가:

// app/(dashboard)/@team/default.tsx
// 이 파일이 없으면: 다른 슬롯만 있는 URL로 네비게이션할 때 Next.js가
// "이 슬롯에 뭘 렌더해야 하지?"를 모르고 에러를 냄
 
export default function TeamDefault() {
  return null  // 또는 로딩 스켈레톤, 기본 컨텐츠 등
}

💡 한 줄로 기억하기
Parallel Routes의 @slot은 레이아웃에 독립적인 "화면 구역"을 추가하는 거야. 각 구역은 자체 로딩, 에러 상태를 가질 수 있어.

🎯 Intercepting Routes — URL은 유지하고 컨텍스트만 바꾸기 🟡

🎯 이 섹션을 읽고 나면:

• (..)route 문법으로 네비게이션 시 URL을 "가로채서" 다른 컴포넌트를 보여줄 수 있다
• 직접 접근(새로고침)과 네비게이션 시 다른 컴포넌트가 렌더되는 원리를 이해한다

🤔 잠깐, 먼저 생각해봐
/posts/123으로 링크 클릭 시에는 모달로, URL 직접 입력 시에는 전체 페이지로 보여주려면 어떻게 해야 할까?

Intercepting Routes는 Next.js 내부에서 네비게이션할 때 URL을 가로채서 다른 컴포넌트를 렌더링하는 기능이야.

app/
  posts/
    page.tsx              ← 게시글 목록 (/posts)
    [id]/
      page.tsx            ← 게시글 전체 페이지 (/posts/123 직접 접근 시)
  @modal/
    (.)posts/             ← (.): 같은 레벨(/posts) 인터셉트
      [id]/
        page.tsx          ← 게시글 모달 (목록에서 클릭 시, URL은 /posts/123)
    default.tsx           ← 모달 슬롯 기본값 (모달 없을 때)
  layout.tsx              ← { children } + { @modal } 슬롯 포함

실제 동작 흐름:

시나리오 1: /posts 페이지에서 게시글 클릭
→ URL: /posts → /posts/123
→ Next.js: "지금 내부 네비게이션이고, @modal 슬롯에 (.)posts/[id]가 있네"
→ 렌더: 배경(피드) + 모달(게시글 상세)

시나리오 2: 브라우저에 /posts/123 직접 입력
→ URL: /posts/123
→ Next.js: "직접 접근이니 인터셉트 없이 그냥 posts/[id]/page.tsx 렌더"
→ 렌더: 게시글 전체 페이지

시나리오 3: 모달 상태에서 뒤로가기
→ URL: /posts/123 → /posts
→ 모달 닫힘, 피드로 복귀

🚀 둘의 조합: URL을 가진 모달 (Instagram 스타일) 🔴

🎯 이 섹션을 읽고 나면:

• Parallel Routes + Intercepting Routes를 조합해 Instagram 스타일 모달을 구현할 수 있다

// app/layout.tsx — @modal 슬롯 포함
interface RootLayoutProps {
  children: React.ReactNode
  modal: React.ReactNode  // @modal 슬롯
}
 
export default function RootLayout({ children, modal }: RootLayoutProps) {
  return (
    <html lang="ko">
      <body>
        {children}
        {modal}  {/* 모달이 열릴 때 여기에 렌더됨 */}
      </body>
    </html>
  )
}

// app/@modal/(.)posts/[id]/page.tsx — 인터셉트된 모달 버전
import { Modal } from '@/components/ui/Modal'
import { getPost } from '@/lib/dal'
 
export default async function PostModal({
  params,
}: {
  params: Promise<{ id: string }>
}) {
  const { id } = await params
  const post = await getPost(id)
 
  return (
    <Modal>
      {/* 모달 내에서 보여줄 게시글 상세 내용 */}
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </Modal>
  )
}

// components/ui/Modal.tsx — 모달 컴포넌트
'use client'
import { useRouter } from 'next/navigation'
 
export function Modal({ children }: { children: React.ReactNode }) {
  const router = useRouter()
 
  return (
    <div
      className="modal-backdrop"
      onClick={() => router.back()}  // 배경 클릭 시 뒤로가기 → 모달 닫힘
    >
      <div
        className="modal-content"
        onClick={(e) => e.stopPropagation()}  // 내용 클릭 시 닫힘 방지
      >
        {children}
      </div>
    </div>
  )
}

// app/@modal/default.tsx — 모달 없을 때 null 렌더
export default function ModalDefault() {
  return null
}

💥 에러 해결 카탈로그

❌ Parallel Route 슬롯에서 default.tsx 없어서 에러

언제 나오는가?

Error: Missing default export in @modal/default.tsx

원인: 슬롯이 있는 레이아웃에서 현재 URL과 매칭되는 슬롯 페이지가 없을 때 default.tsx가 fallback.

해결책: 모든 @slot 폴더에 default.tsx 파일을 만들어. 내용은 null이어도 됨.

❌ Intercepting Routes가 동작 안 하고 그냥 전체 페이지로 이동

원인: (..) 기호의 레벨이 잘못됨. 파일 시스템 레벨이 아닌 URL 세그먼트 레벨로 계산해야 해.

해결책:

// URL: /posts/[id]를 인터셉트하려면
// @modal 슬롯이 / (루트) 레벨에 있으면: (.)posts/[id]
// @modal 슬롯이 /posts 레벨에 있으면: (.)/ 또는 직접 [id] 폴더

🏁 이번에 배운 내용 총정리

📋 주요 파일 구조 패턴

⚠️ 절대 하지 말 것

📝 마무리 퀴즈

Q1. (.)posts/[id]/page.tsx 에서 (.) 이 의미하는 것은?

• A) 현재 디렉토리의 파일 참조
• B) 같은 URL 세그먼트 레벨의 경로 인터셉트
• C) 한 단계 상위 경로 인터셉트
• D) 루트 경로부터 인터셉트

✅ 정답: B

오답 해설:

• C — (..) 가 한 단계 상위
• D — (...) 가 루트부터

📌 핵심 기억법: . 하나 = 같은 레벨, .. 두 개 = 한 단계 위.

Q2. Instagram 스타일 URL 모달에서 모달을 닫으려면 어떻게 해야 하는가?

• A) useState로 isOpen = false
• B) router.push('/posts')
• C) router.back()
• D) 모달 컴포넌트를 null로 조건부 렌더

✅ 정답: C

해설: router.back()이 히스토리 스택을 뒤로 이동시키면서 Intercepting Route가 해제되어 @modal 슬롯이 default.tsx(null)로 돌아가. router.push()는 새 히스토리를 추가해서 동작 방식이 달라.

📌 핵심 기억법: 모달 닫기 = 뒤로가기(back). 히스토리 스택을 이용하는 거야.

Q3. 친구에게 설명한다면?

Intercepting Routes가 "같은 URL인데 다르게 보여준다"는 게 어떤 의미인지 비유로 설명해봐.

예시 답변:

"도서관 비유야. 도서관 내부 엘리베이터(Next.js 네비게이션)를 타고 3층 열람실에 가면 열람실 사서가 책을 바로 보여줘(모달). 근데 건물 정문으로 직접 3층으로 올라가면(직접 URL 접근) 그냥 열람실 전체가 보여(전체 페이지). 같은 주소인데 어떻게 왔느냐에 따라 다른 경험을 제공하는 거야."

🐣 영철이의 퇴근 일기

오늘은 정말 넥스트 라우팅의 끝판왕이라 불리는 'Parallel & Intercepting Routes' 를 배우면서 머리가 어질어질했어. (.) 이나 (..) 같은 생소한 문법들을 보면서 "이게 대체 뭐야?" 싶었는데, 인스타그램 같은 복잡한 모달 구조를 이렇게 우아하게 풀 수 있다니 정말 놀라웠어.

💡 오늘의 교훈: "복잡한 UI 상태 관리에 매몰되지 말자. Parallel & Intercepting Routes 를 활용해 URL과 UI를 일치시키면, 새로고침해도 깨지지 않는 견고한 서비스를 만들 수 있다!"

영호 리드 님이 도서관 엘리베이터 비유를 들어 설명해 주실 때, 인터셉팅 라우트가 왜 '가로채기' 인지 단번에 이해가 가더라. 단순히 기능을 구현하는 걸 넘어, 사용자가 어디서 접속하든 일관된 경험을 주는 게 얼마나 중요한지 깨달았어. 오늘 너무 고생한 나 자신에게 시원한 아이스 아메리카노 한 잔 사줘야지! 내일은 더 '우아한' 라우팅을 설계하는 개발자가 될 거야! 🐣

🔗 더 알아보기

• Next.js 공식 문서 — Parallel Routes
• Next.js 공식 문서 — Intercepting Routes