📅 2025-12-09
➡️ Next.js Parallel Routes, Intercepting Routes에 대해 새롭게 알게 된 것 또는 헷갈리는 부분 정리
🔎 학습 리마인드
📌 Parallel Routes
🔗 File-system conventions: Parallel Routes
- 동일한 레이아웃 내에서 여러 페이지를 동시에 또는 조건부로 렌더링할 수 있게 해주는 기능
- 소셜 사이트의 대시보드 및 피드와 같은 동적인 UI 구성에 유용
- 하나의 레이아웃에서 여러 Slot 영역을 독립적으로 렌더링
💡 Slot과 @folder 규칙
Slot이란?
- Parallel Route에서 렌더링될 독립 영역
- Parallel Route에서 각 병렬 영역을 Slot이라고 함
@슬롯명폴더를 만들면 해당 이름으로 레이아웃 props로 전달됨layout.tsx// app/layout.tsx export default function RootLayout({ children, modal, // @modal폴더와 매칭되는 슬롯 }: Readonly<{ children: React.ReactNode; modal: React.ReactNode; }>) { return( <body> {modal} {children} </body> ) }children→ 기본 라우트modal→app/@modal아래의 라우트들이 렌더링
📌 Intercepting Routes
🔗 Intercepting Routes – Nextjs 한글 문서
- 다른 경로를 현재 레이아웃에서 가로채기
- 현재 레이아웃 내에서 애플리케이션의 다른 부분의 라우트를 로드할 수 있음
- 다른 페이지로 완전히 이동하지 않고 콘텐츠만 overlay / modal 등으로 표현
- 예:
feed에서 사진 클릭 →photos/[id]라우트를 모달로 표시
- 예:
💡 Convention
(.): 현재 세그먼트 매칭(..): 한 단계 상위 세그먼트로 이동
📌 Soft Navigation vs. Hard Navigation
| 구분 | Soft Navigation | Hard Navigation |
|---|---|---|
| 특징 | React 내부 라우팅 | 전체 페이지 리로드 |
| Layout 유지 | O | X (다시 렌더링) |
| 상태 유지 | O | X |
| Suspense 동작 | 기존 유지 | 다시 실행 |
| UX 느낌 | SPA 전환처럼 부드러움 | 새로고침 느낌 |
