React router dom의 createBrowserRouter을 사용해보기

createBrowserRouter이란?

createBrowserRouter는 react-router-dom v6.4에서 도입된 API로, 기존의 <BrowserRouter> 및 <Routes> 컴포넌트와 다른 방식으로 라우팅을 설정할 수 있다. createBrowserRouter는 라우터 설정을 하나의 객체로 구성해 좀 더 선언적이고 직관적인 라우팅을 가능하게 한다.

사용 예시

import * as React from "react";
import * as ReactDOM from "react-dom";
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

import Root, { rootLoader } from "./routes/root";
import Team, { teamLoader } from "./routes/team";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Root />,
    loader: rootLoader,
    children: [
      {
        path: "team",
        element: <Team />,
        loader: teamLoader,
      },
    ],
  },
]);

ReactDOM.createRoot(document.getElementById("root")).render(
  <RouterProvider router={router} />
);

createBrowserRouter의 주요 특징

1. 객체 기반의 라우팅 구성:
   • createBrowserRouter는 라우팅 설정을 객체 형태로 선언한다. 이로 인해 라우팅 트리를 명확하게 파악할 수 있으며, 각 경로의 구조와 역할이 한눈에 보인다.
2. RouterProvider와 함께 사용:
   • 생성한 라우터 객체는 <RouterProvider> 컴포넌트에 전달하여 렌더링한다. 이 방식은 전역적인 라우터 설정을 한곳에서 관리할 수 있도록 돕는다.
3. Nested Routes의 선언적 관리:
   • 중첩된 라우팅을 객체 구조로 쉽게 설정할 수 있다. 이는 기존의 <Route> 안에 <Route>를 중첩하여 사용하는 방식보다 구조적으로 직관적이며 유지보수가 용이하다.
4. 로더와 액션 함수 지원:
   • createBrowserRouter는 각 라우트에 대해 loader와 action 함수를 선언할 수 있도록 지원하여, 데이터 로딩 및 폼 액션 처리가 라우팅 설정과 밀접하게 통합된다. loader는 컴포넌트가 렌더링되기 전 데이터를 가져오는 함수이며, action은 폼과 같은 요소의 데이터를 서버로 전송할 때 사용된다.

createBrowserRouter 방식의 장점

1. 라우팅과 데이터 로딩 통합:
   • loader와 action을 통해 라우팅과 데이터 페칭을 통합하여 한 번에 처리할 수 있어 코드가 더 간결해진다. 이를 통해 컴포넌트 외부에서 데이터를 가져오거나, 컴포넌트 렌더링 시에 데이터가 미리 준비된 상태로 제공된다.
2. 불필요한 중첩 제거:
   • 기존 <BrowserRouter>, <Routes>, <Route> 방식에서는 불필요한 중첩이 발생할 수 있다. 하지만 createBrowserRouter에서는 각 라우트를 객체로 관리하기 때문에 중첩이 필요하지 않아 구조가 더 깔끔해진다. 이는 가독성을 높이고 유지보수를 용이하게 한다.
3. 유지보수성 향상:
   • 라우팅 설정을 별도의 객체로 관리하므로, 라우팅 구조를 한 번에 파악할 수 있어 유지보수가 용이하다. 특히 대규모 프로젝트에서 여러 페이지의 경로를 한눈에 관리할 수 있다는 점이 큰 장점이다.
4. ErrorBoundary와 Suspense 지원:

   • createBrowserRouter는 각 라우트에 대해 ErrorBoundary와 Suspense를 사용할 수 있어, 에러 발생 시 대체 컴포넌트를 렌더링하거나 로딩 상태를 관리할 수 있다. 기존 방식에서도 가능은 했지만 설정을 하는 것이 번거로웠다. createBrowserRouter로 넘어오며 좀 더 간편하게 관리할 수 있게 되었다.

   • 기존 방식

     import React, { Suspense } from "react";
     import { BrowserRouter, Routes, Route } from "react-router-dom";
     import ErrorBoundary from "./ErrorBoundary"; // 전체 에러를 처리하는 컴포넌트
     import Layout from "./Layout";
     import Browse from "./pages/Browse";
     import MyList from "./pages/MyList";
     
     const App = () => (
       <BrowserRouter>
         <ErrorBoundary>
           <Suspense fallback={<div>Loading...</div>}>
             <Routes>
               <Route path="/" element={<Layout />}>
                 <Route index element={<Browse />} />
                 <Route path="mylist" element={<MyList />} />
                 {/* 다른 Route들 */}
               </Route>
             </Routes>
           </Suspense>
         </ErrorBoundary>
       </BrowserRouter>
     );
     
     export default App;

     여기서 라우트마다 다른 rrorBoundary와 Suspense를 설정해주려면 각각 ErrorBoundary와 Suspense 컴포넌트로 묶어주어야 해서 매우 번거롭고, 코드의 가독성이 떨어졌다.

   • createBrowserRouter

     const router = createBrowserRouter([
       {
         path: "/",
         element: <Root />,
         loader: rootLoader,
         errorElement: <RootError />,  // 각 라우트에 에러 컴포넌트 지정
         children: [
           {
             path: "team",
             element: <React.Suspense fallback={<Loading />}>
                        <Team />
                      </React.Suspense>,
             loader: teamLoader,
             errorElement: <TeamError />,  // 특정 라우트에만 다른 에러 컴포넌트 지정
           },
         ],
       },
     ]);

참고

• https://reactrouter.com/en/main/routers/create-browser-router
• https://velog.io/@sj_yun/createBrowserRouter-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0
• https://noah-dev.tistory.com/38