[250310] Parellel & Intercepting Routes

Parallel Routes(병렬 라우팅)

레이아웃 안에서 독립적으로 작동하는 여러 페이지를 동시에 렌더링하는 기술

🔍 작동 원리

• @folder 네이밍 컨벤션으로 슬롯 정의

• layout.ts에서 < /> 컴포넌트로 위치 지정

app/
├─ @analytics/
│  └─ page.ts
└─ @notifications/
    └─ page.ts

✨ 핵심 특징

• 독립적인 로딩/에러 처리: 각 파일별 loading.ts, error.ts 적용 가능

• 조건부 렌더링: props.params로 동적 슬롯 제어 가능

• URL 구조 영향 없음: / 경로 유지하면서 컴포넌트 분리

🛠 사용 예시

• 실시간으로 변경 되는 패널

• 여러가지 정보를 한 번에 보여줘야하는 탭

• 같은 레이아웃에서 다른 컴포넌트를 보여주는 모달

Intercepting Routes(가로채기 라우팅)

페이지 전환 없이 모달/팝업 형태로 경로를 가로채는 기술

🔍 작동 원리

• (.) 폴더 구조로 상대 경로 지정

app/
├─ @modal/
│  └─ (.)photo/
│     └─ [id]/
│        └─ page.js  # 모달 컨텐츠
└─ photo/
   └─ [id]/
      └─ page.js     # 전체 페이지

✨ 핵심 특징

• 컨텍스트 유지: 기존 페이지 상태를 유지하면서 모달 오픈

• 뒤로 가기 최적화: 브라우저 히스토리 스택에 영향을 주지 않음

• 동적 타겟팅: parallelRoutes props으로 가로챈 경로 확인

🛠 사용 예시

• 이미지/비디오 확대 모달

• 로그인/회원가입 팝업

• 빠른 상세 정보 확인창

✅ 장점

• Parallel
  • 복잡한 UI 분리 관리 가능
  • 독립적인 데이터 패칭 기능
• Intercepting
  • 페이지 이동 UX 개선
  • 컨텍스트 유지 가능

⚠️ 주의점

• Parallel
  • 폴더 구조 설계 필요
  • 과도한 분리 금지
• Intercepting
  • 모달 접근성 고려
  • 히스토리 관리 주의

📖 마치며

Next.js의 고급 라우팅 기능을 배워 보았습니다. 이전 react 할 때에 ProtectedRoute와 비슷한 사용성인가 했지만 전혀 다른 사용성으로 새로운 개념을 배우는 것 같았습니다.

해당 기능을 사용하여 UX를 개선하고 Next.js 적인 발상을 하여 프로젝트에 적용 해보고 싶습니다.