React Router 버전과 구현 스타일에 따른 차이 비교

두 방식의 차이점

1. createBrowserRouter 및 RouterProvider 방식:
   • React Router v6.4 이상에서 도입된 새로운 라우팅 설정 방식입니다.
   • 라우트 설정을 코드 상단에서 객체 배열로 구성하여 라우트를 정의합니다.
   • RouterProvider는 이 라우트 객체를 받아서 라우트 관리와 탐색 흐름을 더 구조화된 방식으로 설정할 수 있게 해줍니다.
   • 더 큰 규모의 애플리케이션에서는 라우트 데이터를 더 쉽게 관리할 수 있는 장점이 있습니다.
2. HashRouter 또는 BrowserRouter와 Routes, Route 방식:
   • React Router v6 이하 또는 전통적인 라우팅 구현 방식에서 주로 사용되던 방식입니다.
   • Routes 컴포넌트 내부에 여러 Route 컴포넌트를 중첩하여 라우트를 정의합니다.
   • 간단한 애플리케이션이나 기존 코드베이스에서 더 자주 사용되며, 구조가 비교적 단순합니다.

코드 예시 비교

1. createBrowserRouter 방식 (새로운 방식)

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import Layout from "./components/Layout";
import Home from "./routes/Home";
import Profile from "./routes/Profile";

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />
      },
      {
        path: "profile",
        element: <Profile />
      }
    ]
  }
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

• 이 방식은 라우트 설정을 구조화하여 관리하기 좋습니다.
• 각 라우트를 객체 형태로 지정해, 페이지와 레이아웃을 더 체계적으로 설정할 수 있습니다.
• 대규모 애플리케이션에서 라우트 설정 파일을 따로 관리하기에 용이합니다.

2. BrowserRouter와 Routes, Route 방식 (전통적인 방식)

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import About from "./routes/About";
import Detail from "./routes/Detail";
import Navigation from "./components/Navigation";

function App() {
  return (
    <BrowserRouter>
      <Navigation />
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/movie/:id" element={<Detail />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

• 이 방식은 간단한 라우트 구조에 적합하며, 코드가 짧고 직관적입니다.
• 컴포넌트를 바로 사용하여 간결하게 라우트를 정의할 수 있습니다.
• 그러나 대규모 프로젝트에서는 라우트 구성이 길어질 수 있어 관리가 어려워질 수 있습니다.

결론

• 간단한 애플리케이션이나 빠르게 구조를 잡아야 할 때는 기존 방식(BrowserRouter와 Routes)이 더 직관적이고 빠르게 사용할 수 있습니다.
• 복잡한 라우트 구조나 데이터를 포함한 구조화된 라우트가 필요한 경우에는 createBrowserRouter와 RouterProvider 방식이 유리합니다.