리액트 라우터 - BrowserRouter와 createBrowserRouter

BrowserRouter는 React Router에서 제공하는 라우터 중 하나로, HTML5 History API를 사용하여 브라우저의 URL과 React 애플리케이션의 UI를 동기화하는 역할을 합니다. <BrowserRouter>는 컴포넌트를 사용하여 라우팅을 설정하고,  컴포넌트 내부에 라우팅 관련 컴포넌트들을 작성하여 사용합니다.

createBrowserRouter는 React Router v5부터 추가된 함수형 라우터입니다. 기존의 BrowserRouter와 달리, 함수를 사용하여 라우터를 생성하며, 다른 라이브러리와의 통합이 더 쉬워집니다. 또한, 코드 스플리팅에 대한 더 나은 지원을 제공합니다.

 

 

---

BrowserRouter

 

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route index element={<Home />} />
          <Route path="blogs" element={<Blogs />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
}

 

 

createBrowserRouter

 

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

---

BrowserRouter의 특징

 

- HTML5 History API를 사용하여 브라우저의 URL과 React 애플리케이션의 UI를 동기화합니다.

- <BrowserRouter> 컴포넌트를 사용하여 라우팅을 설정하기 때문에, 사용법이 간단합니다.

 

createBrowserRouter의 특징

- 함수를 사용하여 라우터 생성합니다

 

 

---

주관적 생각

1. createBrowserRouter가 BrowserRouter보다 더 복잡한 구성을 필요로 하기 때문에, 초기 구성에 있어서는 BrowserRouter가 더 간단하게 구성할 수 있습니다.

2.  BrowserRouter의 단점을 찾아보자면, 사용자의 브라우저가 HTML5 History API를 지원하지 않으면, 라우팅이 제대로 동작하지 않을 수 있습니다.
(하지만, 대부분의 최신 브라우저에서는 HTML5 History API를 지원하기 때문에, 이러한 문제는 크게 발생하지 않을 것이라 생각합니다.)

3.  구성이 간단하고 브라우저 호환성에 대한 문제가 없는 경우 BrowserRouter를 선택하는 것이 더 적절할 수 있습니다.

4. createBrowserRouter의 경우 구성하는 것은 번거로울 수 있겠지만, 오브젝트 형태에 맞춰서 코드를 작성하기 때문에, 유지보수, 협업에 유리할 수 있을 것이라 생각합니다.