핵심 흐름

중첩 라우팅은 부모 경로에 해당하는 컴포넌트 내부에 자식 경로에 해당하는 컴포넌트를 렌더링하는 것을 의미합니다.

React Router v6에서 중첩 라우팅을 구현하는 핵심은 Outlet 컴포넌트입니다.

대시보드와 그 하위 메뉴를 가진 간단한 애플리케이션을 만들어 중첩 라우팅을 이해해 봅시다.

레이아웃 관리 효율성: 여러 하위 페이지에서 공통적으로 사용되는 레이아웃(헤더, 사이드바, 푸터 등)을 부모 라우트 컴포넌트 한 곳에서 관리할 수 있습니다.

핵심 기준

실제 애플리케이션에서 매우 자주 쓰이는 강력한 라우팅 기법인 중첩 라우팅(Nested Routing)에 대해 알아보겠습니다.

중첩 라우팅은 말 그대로 라우트 안에 또 다른 라우트를 정의하는 방식입니다.

예시 시나리오 대시보드 페이지를 생각해 봅시다.