React Router (2. 중첩 라우팅)

중첩 라우팅

react router를 사용해 라우트 요소를 설정하면서, 웹 에플리케이션에 가장 연관된 레이아웃은 바로 메뉴(링크)를 나타내는 네비게이션 레이아웃일 것이다. 이러한 네비게이션 레이아웃을 라우터에 작성할 때, 네비게이션이 필요한 페이지도 있고 필요 없는 페이지도 있으므로 어떻게 구조를 짜야할 것인지에 대해 고민이 생겼다. 이러한 일부 route만 중복된 컴포넌트를 렌더링하기 위해 react-router-dom의 <Outlet/> 컴포넌트가 해결해주었다.

Outlet

<Outlet> 컴포넌트는 특정 페이지들끼리 공통적으로 보여줘야 하는 레이아웃이 있을 때 유용하게 사용할 수 있다. 예를 들어, <HomePage /> / <AboutPage /> / <UserPage /> 3개의 페이지가 있을 때 AboutPage, UserPage에만 네비게이션을 보여주어야 하는 상황이라고 가정해보자. 평소였으면 AboutPage, UserPage 페이지에 각각 네비게이션 컴포넌트를 달았겠지만, Outlet을 사용해서 한 번만 호출해서 사용할 수 있다.

import { Outlet } from 'react-router-dom';

// 메뉴바와 footer 구역이 있는 페이지의 기본 레이아웃 컴포넌트이다. 
// 이 컴포넌트를 중첩 <Route />컴포넌트의 element에 적용해준다.
const BasicLayout: FC = () => {
 	return (
      <>
        <Navbar />				// 페이지의 네비게이션 메뉴 바를 그려준다. 	
      	<Outlet/> 				// 자식 Route의 지정된 element가 그려준다.
        <Footer />				// 페이지의 footer 구역을 그려준다.
      </>      	
    );
}

index Route

위의 <Outlet /> 컴포넌트를 바탕으로 <App /> 컴포넌트에 라우팅을 완성할 차례이다. <Route /> 컴포넌트는 index라는 boolean 타입의 속성을 제공한다. 이 속성을 적용하면 중첩 루트 상황에서 어떤 컴포넌트가 인덱스(메인)인지 지정하고 그 컴포넌트를 화면에 그릴 수 있다.

<Routes>
  <Route path='/' element={<BasicLayout />}>
    <Route index element={<HomePage />} />				// 메인 홈페이지에 적용한다.
    <Route path='/board' element={<Index />} />   
    <Route path='/board/card/:cardId' element={<DetailCard />} />  
  </Route>   
  <Route path='이후 다른 페이지 경로 설정...'/>
</Routes>

이렇게 Route를 적용하는 구조를 중첩 라우팅이라고 한다. 적용된 결과는 우리가 흔히 하는 보통의 웹사이트들처럼 네비게이션바 를 맨 위로, 그 아래에 페이지(컴포넌트)들이 각각 그려질 것이다.