React 애플리케이션에서 라우팅을 설정할 때, 많은 개발자들이 BrowserRouter를 사용해본 경험이 있을 것이다. 하지만 React-Router v6에서 새로 업데이트된 createBrowserRouter는 더 유연하고 강력한 기능을 제공하여 복잡한 라우트 관리에 큰 도움을 준다. 이번 글에서는 BrowserRouter와 createBrowserRouter의 차이점과 함께, createBrowserRouter를 사용했을 때의 장점에 대해 살펴보겠다.
1. BrowserRouter vs createBrowserRouter
BrowserRouter
BrowserRouter는 React Router에서 가장 많이 사용되는 기본적인 라우터이다. HTML5의 history API를 사용하여 탐색 기록을 관리하며, JSX 기반으로 라우트를 선언한다. 이를 통해 컴포넌트를 트리 구조로 구성하며 중첩 라우트와 경로를 설정할 수 있다.
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />} />
<Route path="about" element={<About />} />
</Routes>
</BrowserRouter>
);
}
export default App;createBrowserRouter
createBrowserRouter는 BrowserRouter와 달리 라우트를 객체 기반으로 정의할 수 있다. 이 객체 기반 구조를 통해 라우트 관련 설정을 보다 명확하고 유연하게 관리할 수 있으며, 라우트별로 더 많은 세부 기능을 지원한다.
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Home from './pages/Home';
import About from './pages/About';
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
},
{
path: "about",
element: <About />,
},
]);
function App() {
return (
<RouterProvider router={router} />
);
}
export default App;2. createBrowserRouter의 장점
1) 객체 기반 라우트 정의
createBrowserRouter의 가장 큰 장점은 라우트를 객체 기반으로 정의할 수 있다는 점이다. 라우트를 선언적 방식(JSX)으로 관리하는 대신, 객체로 라우트와 관련된 옵션을 설정하므로 더 복잡한 라우트 구조를 간결하게 표현할 수 있다.
장점 1: 객체 기반 구조는 중첩된 라우트, 오류 처리, 데이터 로딩 등 라우트와 관련된 설정을 한 곳에서 관리할 수 있어 유지보수성이 높아진다.
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <ErrorPage />, // 라우트별 오류 처리 가능
children: [
{
path: "about",
element: <About />,
},
],
},
]);2) 라우트별 오류 처리 기능 (errorElement)
기존 BrowserRouter를 사용할 때는 오류 페이지를 따로 관리하거나 직접 설정해야 했다. 하지만 createBrowserRouter는 각 라우트에 errorElement를 추가하여 경로 오류나 기타 문제가 발생할 때 자동으로 지정된 오류 페이지를 렌더링할 수 있다.
장점 2: 라우트마다 오류 처리를 쉽게 적용할 수 있어, 사용자에게 더 나은 오류 페이지를 제공하고 오류에 대한 처리를 일관성 있게 관리할 수 있다.
const router = createBrowserRouter([
{
path: "/",
element: <Home />,
errorElement: <ErrorPage />, // 오류 시 ErrorPage 표시
},
]);3) 데이터 로딩 및 폴백 처리 (loader)
createBrowserRouter는 각 라우트에서 데이터를 사전 로딩할 수 있는 loader 속성을 지원한다. 이를 통해 페이지가 렌더링되기 전에 필요한 데이터를 미리 불러올 수 있어, 페이지 로딩 시 데이터를 기다리는 지연 시간을 줄일 수 있다.
장점 3: 데이터 로딩을 라우트에서 직접 처리할 수 있어 컴포넌트 내에서 불필요한 상태 관리 코드를 줄일 수 있으며, 사용자 경험을 개선할 수 있다.
const router = createBrowserRouter([
{
path: "/profile",
element: <Profile />,
loader: async () => fetchUserProfile(), // 데이터를 미리 로드
},
]);4) 라우트 정의와 내비게이션 제어의 분리
createBrowserRouter는 라우트 정의와 내비게이션 로직을 분리할 수 있게 해준다. 이는 라우트 구성을 컴포넌트 내의 JSX 트리와 분리하여, 복잡한 라우트 구성을 더욱 명확하게 관리할 수 있다는 장점이 있다.
장점 4: 라우트 설정과 UI 논리가 분리되어 코드 가독성이 향상되고 대규모 애플리케이션에서도 라우트 관리가 용이해진다.
3. 언제 createBrowserRouter를 사용할까?
createBrowserRouter는 복잡한 라우트 구조, 중첩 라우트, 라우트별 오류 처리, 그리고 데이터를 사전 로딩해야 하는 경우에 특히 유리하다. 만약 간단한 페이지 이동만 필요하고, 데이터를 컴포넌트 내에서 로딩하거나 특별한 오류 처리가 필요하지 않다면 기존의 BrowserRouter를 사용하는 것이 더 간편할 수 있다.
그러나 프로젝트가 커지고, 라우팅과 관련된 기능이 복잡해질수록 createBrowserRouter의 유연한 설정과 기능을 활용하는 것이 더 효율적이다.
