# [[Nested Routing]]

## 📌 Brief Summary
Nested Routing(중첩 라우팅)은 React Router에서 하나의 라우트 내에 다른 라우트를 정의하여 마트료시카 인형처럼 계층적인 구조를 만드는 라우팅 기법입니다 [1, 2]. 이 패턴을 사용하면 사이드바나 헤더와 같은 페이지의 특정 UI 요소는 고정된 상태로 유지하면서, URL의 변화에 따라 나머지 하위 부분만 동적으로 렌더링할 수 있습니다 [3, 4]. 대시보드나 설정 페이지와 같이 복잡하고 계층적인 내비게이션을 가진 최신 웹 애플리케이션의 레이아웃을 구축하는 데 필수적으로 활용됩니다 [3, 4].

## 📖 Core Content
* **계층적 UI 구조 및 레이아웃 유지:** Nested Routing은 부모-자식 라우트 관계를 형성하여 복잡한 사용자 인터페이스 레이아웃을 효율적으로 관리할 수 있게 해줍니다 [2, 5]. 대시보드 구조처럼 공통 레이아웃 요소는 그대로 유지하면서, 사용자의 탐색 경로(예: `/dashboard/profile`, `/dashboard/settings`)에 따라 자식 콘텐츠만 변경되도록 설계할 수 있습니다 [2-4].
* **`<Outlet>` 컴포넌트의 활용:** React Router v6에서 중첩된 라우트를 화면에 렌더링하는 핵심 요소는 `<Outlet />` 컴포넌트입니다 [4, 6]. 부모 컴포넌트 내부에 배치된 `<Outlet>`은 현재 URL에 일치하는 자식 라우트 컴포넌트가 렌더링될 위치를 지정하는 자리 표시자(placeholder) 역할을 수행합니다 [2, 6, 7].
* **기본 화면 구성을 위한 `Index` 속성:** 부모 라우트 경로에 정확하게 일치하여 접근했을 때 표시될 기본 뷰를 설정하기 위해 `index` 속성을 사용합니다 [7, 8]. 이는 사용자가 특정 하위 경로 없이 상위 경로(예: `/dashboard`)만 방문하더라도 기본 콘텐츠(예: 대시보드 개요 페이지)가 렌더링되도록 보장합니다 [2, 4].
* **확장 및 통합 패턴:** Nested Routing은 여러 단계로 깊게 중첩(Multi-Level Nesting)될 수 있습니다 [5]. 또한, `useParams()`를 활용하여 동적 URL 세그먼트(Dynamic Segments)를 다루거나 상대 경로(Relative paths)를 이용한 내비게이션과 원활하게 결합됩니다 [7]. 더 나아가 인증이 필요한 페이지 접근을 제어하는 보호된 라우트([[Protected Routes]]) 레이아웃과 결합하여 안전하고 확장 가능한 내비게이션 패턴을 구축할 수 있습니다 [5, 7, 9].

## 🔗 Knowledge Connections
- **Related Topics:** [[React Router v6]], [[Protected Routes]], [[Dynamic Segments]]
- **Projects/Contexts:** [[Dashboard Layouts]], [[Settings Pages]]
- **Contradictions/Notes:** 제공된 소스들 간에 모순된 내용은 없으며, 모든 소스가 React Router v6 환경에서 `<Outlet>` 및 `index`를 활용한 Nested Routing의 이점과 작동 방식을 일관되게 설명하고 있습니다.

---
*Last updated: 2026-04-26*