createBrowserRouter 사용하기

기존 프로젝트에서 리팩토링 요소들을 고려하던 도중 새롭게 알게된 createBrowserRouter 사용에 관한 포스팅을 작성하고자 합니다.

createBrowserRouter에란?

createBrowserRouter는 React Router v6.4에서 새롭게 에 추가된 방식중 하나로 라우터 객체를 생성하는 데 사용됩니다. 이 함수는 라우터 구성을 객체 형태 로 선언적으로 만들 수 있게 해주며,이를 BrowserRouter 컴포넌트에 전달하여 라우팅을 설정합니다.

기존의 BrowserRouter와 Routes, Route를 사용하는 방식과 비교하여 createBrowserRouter가 가지는 장점을 살펴보겠습니다.

라우팅 설정의 간결함

import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import Layout from './Layout';
import Browse from './pages/Browse';
import MyList from './pages/MyList';
import Search from './pages/Search';
import NotFound from './pages/NotFound';

const router = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Navigate to='browse/movie' />} />
          <Route path="browse/:section" element={<Browse />} />
          <Route path="search/:section" element={<Search />} />
          <Route path="mylist" element={<MyList />} >
            <Route path=":section" element={<MyList />} />
          </Route>
          <Route path="*" element={<NotFound />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

export default router;

기존의 BrowserRouter와 Routes, Route를 사용하는 방식은 중첩된 구조로 라우팅을 설정해야 했습니다.

이로 인해 코드가 길고 복잡해지는 경향이 있었습니다. 반면 createBrowserRouter는 JSON 구조로 라우팅을 설정하여 코드를 간결하게 유지할 수 있습니다. 불필요한 중첩을 줄임으로써 가독성을 향상시키고, 라우팅 설정에 집중할 수 있게 됩니다.

import { createBrowserRouter, Navigate } from 'react-router-dom';
import Layout from './Layout';
import Browse from './pages/Browse';
import MyList from './pages/MyList';
import Search from './pages/Search';
import NotFound from './pages/NotFound';

const router = createBrowserRouter([
  {
    element: <Layout />,
    children: [
      {
        path: '/',
        element: <Navigate to='browse/movie' />,
      },
      {
        path: 'browse/:section',
        element: <Browse />,
      },
      {
        path: 'search/:section',
        element: <Search />,
      },
      {
        path: 'mylist',
        element: <MyList />,
        children: [
          {
            path: ':section',
            element: <MyList />,
          },
        ],
      },
      {
        path: '*',
        element: <NotFound />,
      },
    ],
  },
]);

export default router;

하위 경로 정의 방식

기존 방식에서는 Route 구성 요소가 서로 중첩되어 하위 경로를 정의합니다. 중첩된 Route의 path는 상위 경로를 기준으로 하위 경로를 지정합니다

// 기존 Router 를 사용하여 하위 요소 설정
 <Route path="mylist" element={<MyList />} >
    <Route path=":section" element={<MyList />} />
     </Route>

createBrowserRouter를 사용한 구성은 JSX가 아닌 객체 구조를 사용하여 정의됩니다. children 속성은 상위 경로 /mylist 아래에 하위 경로를 정의하는 데 사용됩니다. 각 하위 개체는 자체 경로와 해당 요소(렌더링할 구성 요소)가 있는 하위 경로를 나타냅니다

  
// createBrowserRouter를 사용하여 하위 요소 설정
 {
        path: 'search/:section',
        element: <Search />,
      },
 {
        path: 'mylist',
        element: <MyList />,
        children: [
          {
            path: ':section',
            element: <MyList />,
          },
        ],
      },

RouterProvider 설정 방식

우선 기존의 방식처럼 BrowserRouter로 감싸지 않습니다.

import { BrowserRouter } from 'react-router-dom'

const root = ReactDOM.createRoot(document.getElementById('root'))
root.render(
  <BrowserRouter> // 최상단 root에서 BrowserRouter로 감싸기
      <App /> 
  </BrowserRouter>
)

RouterProvider 를 이용해서 구성요소들을 전달하고 활성화 합니다.

import { RecoilRoot } from 'recoil';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';import router from './Router';


const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(
  <RecoilRoot>
      <RouterProvider router={router} />
  </RecoilRoot>
);

요약

createBrowserRouter도입으로 인한 변화들은 코드의 가독성을 높이고 유지보수를 용이하게 만들어줍니다.
특히 대규모 애플리케이션에서 정의해야 될 Router의 수가 많을수록 createBrowserRouter 사용으로 더 큰 이점을 얻을 수 있을 것으로 보입니다.

Reference: https://reactrouter.com/en/main/routers/create-browser-router
https://velog.io/@adultlee/createBrowserRouter%EB%A5%BC-%ED%86%B5%ED%95%9C-Router%EA%B8%B0%EB%8A%A5-%EC%B6%94%EA%B0%80