[리액트] React Router v6와 v7 라우트 주소 설정 차이

오늘 프로젝트 라우트 주소를 설정하게 되었다.
팀원과 얘기하면서 알게되었는데 React Router의 현재 버전은 7인데 이전 프로젝트를 하면서 썼던 주소는 v6의 설정처럼 했다는 것이었다.
그래서 차이점에 대해 작성해두면 좋을 것 같다는 생각이 들었다!

React Router v6으로 설정한 라우트 주소

import Home from './pages/Home';
import Result from './pages/Result';
import Dictionary from './pages/Dictionary';
import Quiz from './pages/Quiz';
import { Routes, Route } from 'react-router-dom';

function App() {
  <>
    <Routes>
      {/* Home */}
      <Route path="" element={<Home />} />
      <Route path="result" element={<Result />} />

      {/*  Dictionary */}
      <Route path="dictionary" element={<Dictionary />} />

      {/*  Quiz */}
      <Route path="quiz" element={<Quiz />} />
    </Routes>
    ;
  </>;
}

export default App;

React Router v7으로 설정한 라우트 주소

Routes와 Route 컴포넌트를 직접 사용하지 않는다
대신 createBrowserRouter와 RouterProvider를 사용하는 방식으로 변경되었다

import Home from './pages/Home';
import Result from './pages/Result';
import Dictionary from './pages/Dictionary';
import Quiz from './pages/Quiz';
import Layout from './components/Layout';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';

const router = createBrowserRouter([
  {
    path: "/",
    element: <Layout />, // 공통 레이아웃
    children: [
      {
        index: true, // 기본 경로 (/)
        element: <Home />
      },
      {
        path: "result",
        element: <Result />
      },
      {
        path: "dictionary",
        element: <Dictionary />
      },
      {
        path: "quiz",
        element: <Quiz />
      }
    ]
  }
]);

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

export default App;

🚨 v7 방식대로 했을 때의 장점

• 데이터 로딩 통합 : 라우트 정의에 loader 함수를 직접 연결해 데이터 페칭이 더 효율적으로 처리된다
• 에러 처리 개선 - 각 라우트마다 독립적인 에러 처리가 가능해져서 앱의 안정성이 높아진다
• 코드 구조 개선 - 모든 라우트 정의가 한 곳에 중앙화되어 앱 구조 파악이 쉬워진다
• 타입 안정성 - 객체 기반 정의가 TypeScript와 더 잘 작동해 개발 시 오류가 줄어든다