🎭 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]에서 (.) 기호가 뜻하는 것은 무엇인가?

✅ 정답: 같은 URL 세그먼트 레벨의 경로를 인터셉트한다는 뜻이다.

💡 상세 해설: (.)는 현재 레벨, (..)는 한 단계 위, (...)는 루트 기준 인터셉트다. 이 문법은 파일 시스템 위치가 아니라 URL 세그먼트 기준으로 해석된다. 그래서 폴더 깊이만 보고 판단하면 모달이 전체 페이지로 열리는 버그를 만들기 쉽다.

Q2. URL을 가진 게시글 상세 모달을 닫을 때 useState(false)보다 router.back()이 자연스러운 이유는?

✅ 정답: 모달 열림 상태가 브라우저 히스토리와 URL에 연결되어 있기 때문이다.

💡 상세 해설: Intercepting Routes 모달은 단순한 컴포넌트 상태가 아니라 사용자가 /posts/1이라는 주소로 이동한 결과다. 닫을 때 히스토리를 되돌리면 @modal 슬롯은 default.tsx로 돌아가고 배경 피드도 자연스럽게 유지된다. useState로만 닫으면 URL과 화면이 어긋난다.

Q3. 영철이의 테스트 타임: 피드에서 게시글을 누르면 모달로 열리고, 새 탭에서 같은 URL을 열면 전체 상세 페이지가 떠야 한다. 어떤 파일 구조가 필요할까?

✅ 정답: 실제 상세 페이지 app/posts/[id]/page.tsx와, 피드 컨텍스트에서 가로챌 @modal/(.)posts/[id]/page.tsx를 함께 둔다.

💡 상세 해설: Intercepting Route는 "어디서 왔는지"가 있을 때 컨텍스트를 보존한다. 직접 진입이나 새로고침에는 원본 상세 페이지가 필요하다. Parallel Route의 @modal 슬롯에는 default.tsx도 둬야 매칭되지 않는 순간 null 상태로 안전하게 돌아간다.

🐣 영철이의 퇴근 일기

오늘은 모달을 그냥 isOpen 상태로만 다루던 습관에서 한 단계 벗어났다. 게시글 상세처럼 공유 가능한 화면은 URL이 진짜 상태이고, 모달은 그 URL을 어떤 컨텍스트에서 보여줄지 결정하는 표현 방식이었다.

💡 "공유와 새로고침이 필요한 UI는 컴포넌트 상태가 아니라 라우팅 상태로 설계한다."

다음에 모달 요구사항을 받으면 먼저 "이 화면을 새 탭으로 열어도 의미가 있는가"를 묻겠다. 의미가 있다면 원본 페이지, 인터셉트 페이지, 슬롯 기본값을 함께 설계해서 사용자 히스토리와 화면이 어긋나지 않게 만들겠다.

🔗 더 알아보기

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