[React] BrowserRouter와 createBrowserRouter의 특징과 코드작성차이

 

 

프로젝트 이후 코드를 공부하다가
createBrowserRouter에 대해 알게되었다.
두 방식에 어떤 차이점이 있는지 살펴보자.

 

 

 

 

1. <BrowserRouter> _ 컴포넌트 기반 라우팅

• 앱이 주소창의 변화를 감지하고 그에 맞는 화면을 보여줄 수 있게 해준다.
• 과거에는 HashRouter를 사용해서 "http://localhost:3000/#/admin/customers"로 나타났다.
• BrowserRouter를 사용하면, "http://localhost:3000/admin/customers"로 나타난다.
• BrowserRouter는 HTML5History API를 사용해서, 깔끔한 주소를 가지도록 해준다.
• 끊김 없는 부드러운 화면 전환을 제공한다.

 

 

---

 

 

 

 

 

2. createBrowserRouter_ 객체 기반 선언적 라우팅

• React Router v6.4에서 새롭게 도입된 라우터 설정 방식이다.
• 데이터를 미리 불러오거나 에러 처리를 하는 기능 등을 함께 지원한다.
• loader를 사용해 라우트 전환 시 데이터 미리 로드가 가능하다.
• errorElement로 에러 처리가 가능하다.

 

 

---

 

 

 

 

3. 코드로 보는 차이점

• BrowserRouter 방식

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import Admin from './pages/Admin';
import ProtectedRoute from './components/ProtectedRoute';

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {/* 일반 페이지 */}
        <Route path="/" element={<Home />} />

        {/* 보안 페이지: ProtectedRoute로 감쌈 */}
        <Route 
          path="/admin" 
          element={
            <ProtectedRoute requiredRole="SUPER_ADMIN">
              <Admin />
            </ProtectedRoute>
          } 
        />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

<Router>, JSX 태그 중심이며 컴포넌트가 렌더링 된 후 데이터를 가져온다.  별도의 에러 경계 컴포넌트가 필요하다. 주로 try-catch 혹은 ErrorBoundary를 사용한다. 

 

 

• createBrowserRouter 방식

import { createBrowserRouter, RouterProvider } from 'react-router-dom';
import Home from './pages/Home';
import Admin from './pages/Admin';
import ProtectedRoute from './components/ProtectedRoute';

// 1. 라우터 설정을 객체 형태로 미리 정의한다.
const router = createBrowserRouter([
  {
    path: "/",
    element: <Home />,
  },
  {
    path: "/admin",
    element: (
      <ProtectedRoute requiredRole="SUPER_ADMIN">
        <Admin />
      </ProtectedRoute>
    ),
    // loader: adminDataLoader, // 페이지를 그리기 전에 데이터를 미리 가져오는 기능(Data API)
    // errorElement: <ErrorPage />, // 이 경로에서 에러 발생 시 보여줄 화면
  },
]);

// 2. App 컴포넌트에서는 RouterProvider만 넘긴다.
function App() {
  return <RouterProvider router={router} />;
}

export default App;

{path: ...}, 자바스크립트 객체 중심이다. loader를 사용하여 페이지 렌더링 전에 데이터를 준비할 수 있다. 이 경우, 페이지를 그리기 전부터 데이터를 가져오니 사용자는 훨신 빠르다고 느낄 수 있다. 그리고 errorElement 설정을 통해 경로별로 에러 처리가 가능하다. 폼 데이터를 서버에 보내고 상태를 업데이트하는 과정을 아주 깔끔하게 처리할 수 있다. 아무래도 규모가 큰 대형 프로젝트는 데이터 로딩 최적화와 체계적인 에러 관리가 필요해서 이 방법을 실무에서 쓴다.

 

 

 

---

 

 

- BrowserRouter vs createBrowserRouter

[react-router-dom] createBrowserRouter 활용하여 더 깔끔하게 라우트를 구성해보자!