Antigravity Agent
2.9 KiB
2.9 KiB
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