Parallel Routes & Intercepting Routes — 모달 UI 구현
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Parallel Routes에서 슬롯(slot)을 정의하는 폴더 이름의 형식은?
💡 Parallel Routes의 슬롯은 @로 시작하는 폴더 이름으로 정의합니다. 예: @modal, @analytics, @sidebar. 이 슬롯은 부모 layout.tsx에서 props로 전달받습니다.
Q2. Intercepting Routes에서 `(.)photos`의 의미는?
💡 (.)은 현재 라우트와 같은 레벨의 세그먼트를 가로챕니다. (..)은 한 단계 위, (..)(..)은 두 단계 위, (...)은 루트에서의 절대 경로를 가로챕니다.
Q3. Parallel Routes + Intercepting Routes 모달 패턴에서 `default.tsx`가 필요한 이유는?
💡 Parallel Routes 슬롯은 초기 페이지 로드 시 또는 슬롯에 매칭되는 URL이 없을 때 default.tsx를 렌더링합니다. default.tsx가 없으면 Next.js가 에러를 발생시킵니다. 모달 패턴에서는 null을 반환하여 초기에 아무것도 표시하지 않습니다.
Q4. 모달 패턴에서 사용자가 URL을 직접 입력하거나 새로고침하면 어떻게 동작하는가?
💡 Intercepting Routes는 소프트 네비게이션(클라이언트 사이드 라우팅)에서만 작동합니다. URL 직접 입력이나 새로고침은 하드 네비게이션이므로 인터셉팅이 작동하지 않고, 실제 경로의 page.tsx(전체 화면)가 표시됩니다. 이것이 자연스러운 fallback입니다.
Q5. 모달을 닫을 때 `router.push('/')` 대신 `router.back()`을 권장하는 이유는?
💡 router.back()을 사용하면 모달을 열기 전 상태(피드의 스크롤 위치, 필터 상태 등)로 자연스럽게 돌아갑니다. router.push('/')는 새로운 히스토리를 쌓아 스크롤 위치가 초기화되고, 뒤로가기 버튼이 다르게 동작하는 부작용이 있습니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.