React Router에서 공통된 Layout을 표현하고 싶다

왜?

리액트에서 Router를 조작하다보면 path에 따라 공통적으로 사용하는 레이아웃을 구성할 때가 있다. 이때 하나하나 컴포넌트별로 레이아웃을 중복적으로 다루다 보면 코드의 양이 방대해지고 품질이 떨어지는 경우가 있다.

이럴 때 간편하게 공통 레이아웃을 적용하기 위해 우리는 컴포넌트를 활용할 수 있다.

예시

예시를 들자면, 구글 헤더 아이콘은 공통적으로 사용되는 것을 볼 수 있다.

www.google.com

www.google.com/search

이렇게 path에 따라 공통된 Layout을 사용하고 싶다면 react router dom 에서 Outlet을 사용하면 된다. 친철하게 공식문서에도 나와있다.

Outlet

react router 공식 문서에 따르면 Outlet 컴포넌트의 정의는 아래와 같다.

부모 경로 요소에 을 사용해 자식 경로 요소를 렌더링 해야 합니다. 이렇게 하면 자식 경로가 렌더링 될 때 중첩된 UI를 표시할 수 있습니다. 부모 경로가 정확하게 일치한다면, 자식 인덱스 경로를 렌더링 하고 인덱스 경로가 없다면 아무것도 렌더링 하지 않습니다.

아래는 공식문서의 예제와 같다.

function Dashboard() {
  return (
    <div>
      <h1>Dashboard</h1>

      {/* This element will render either <DashboardMessages> when the URL is
          "/messages", <DashboardTasks> at "/tasks", or null if it is "/"
      */}
      <Outlet />
    </div>
  );
}

function App() {
  return (
    <Routes>
      <Route path="/" element={<Dashboard />}>
        <Route
          path="messages"
          element={<DashboardMessages />}
        />
        <Route path="tasks" element={<DashboardTasks />} />
      </Route>
    </Routes>
  );
}

하지만 나는 /table url에서 사용하는 TableLayout과 /mypage url 에서 사용하는 MyPageLayout을 다르게 하고 싶다면 아래와 같이 작성하면 된다.

import { Navigate, useRoutes } from 'react-router-dom';
// layouts
import TableLayout from './layouts/table';
import MyPageLayout from './layouts/mypage';

// ----------------------------------------------------------------------

export default function Router() {

  return useRoutes([
    {
      path: '/table',
      element: <TableLayout />,
      children: [
        { path: 'item', element: <Item /> }, // /table/item
        { path: 'list', element: <List /> }, // /table/list
      ]
    },
    {
      path: '/mypage',
      element: <MyPageLayout />,
      children: [
        { path: 'coupon', element: <Coupon /> }, // /mypage/coupon
        { path: 'comment', element: <Comment /> }, // /mypage/comment
      ]
    }
  ]);
}

이와 같이 간단하게 표현할 수 있다.