[React] React Router - RouterProvider, createBrowserRouter

최근에 프로젝트를 진행하면서 팀원 분의 코드를 보고 내가 몰랐던 React Router 사용 방식이 있다는 걸 알았다.

그래서 React Router 공식 페이지를 참고하여 내용을 정리해 보았다.

 

 

 

 

내가 사용하고 있던 기존 방식

import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

import { Routes, Route } from "react-router-dom";
import Layout from "@/components/Layout";
import Login from "@/pages/Login";
import Home from "@/pages/Home";
import My from "@/pages/My";

function App() {
  return (
    <Routes>
      <Route path="" element={<Layout />}> // Outlet이 포함되어 있는 컴포넌트
        <Route path="/" element={<Home />} />
        <Route path="/my" element={<My />} />
      </Route>
      <Route path="/login" element={<Login />} />
    </Routes>
  );
}

export default App;

 

 

 

 

RouterProvider와 createBroswerRouter를 사용하는 방식

// router.tsx

import { RouteObject } from "react-router-dom";

import Layout from "@/components/Layout";
import Login from "@/pages/Login";
import Home from "@/pages/Home";
import My from "@/pages/My";

export const routesInfo: RouteObject[] = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "/my",
        element: <My />,
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
];

router 정보만 모아서 따로 파일을 분리한다. Object 타입으로 router 데이터를 구성한다.

children을 통해 중첩 라우팅을 구현할 수 있다.

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { routesInfo } from "@/router";

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

export default App;

 

 

 

 

RouterProvider와 createBroswerRouter 방식에 lazy import 추가하기

// router.tsx

import { lazy } from "react";
import { RouteObject } from "react-router-dom";

import Layout from "@/components/Layout";
import Login from "@/pages/Login";
import Home from "@/pages/Home";

const My = lazy(() => import("@/pages/My")); // lazy import
const PageA = lazy(() => import("@/pages/PageA"));

export const routesInfo: RouteObject[] = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "/my",
        element: <My />,
      },
      {
        path: "/pageA",
        element: <PageA />,
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
];

 

 

React의 lazy를 사용하지 않고 RouteObject가 가진 lazy 메서드를 통해 lazy import 하는 방법도 있다.

// router.tsx

import { RouteObject } from "react-router-dom";

import Layout from "@/components/Layout";
import Login from "@/pages/Login";
import Home from "@/pages/Home";

export const routesInfo: RouteObject[] = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        path: "",
        element: <Home />,
      },
      {
        path: "/my",
        async lazy(): Promise<{ element: JSX.Element }> {
          const My = (await import("@/pages/My")).default; 
          // My 컴포넌트가 default로 내보내질 때(export default) .default를 붙여야 한다.
          return { element: <My /> };
        },
      },
      {
        path: "/pageA",
        async lazy(): Promise<{ element: JSX.Element }> {
          const PageA = (await import("@/pages/PageA")).default; 
          return { element: <PageA /> };
        },
      },
    ],
  },
  {
    path: "/login",
    element: <Login />,
  },
];

이걸 사용하면 코드도 좀 더 길어지고 lazy의 타입을 명시해주어야 하기 때문에... 나는 React.lazy를 사용할 것 같다.