React Router-createBrowserRouter

createBrowserRouter는 React Router v6.4 이상에서 소개된 데이터 중심 라우팅 기능을 제공하는 함수로, 브라우저 기반의 라우터를 생성합니다. 기존의 <BrowserRouter>보다 라우터 구성과 데이터 로딩에 대한 제어를 더 세밀하게 할 수 있습니다.

1. 기본 개념

createBrowserRouter는 라우트 정의를 통해 브라우저 라우터를 생성하며, 이를 <RouterProvider>로 연결하여 애플리케이션에 적용합니다.

---

2. 설치

React Router를 설치해야 합니다.

npm install react-router-dom

---

3. 기본 사용법

다음은 createBrowserRouter의 기본적인 사용법입니다.

App.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider } from "react-router-dom";

// 페이지 컴포넌트
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const Contact = () => <h1>Contact Page</h1>;

// 라우터 정의
const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
    },
    {
        path: "/about",
        element: <About />,
    },
    {
        path: "/contact",
        element: <Contact />,
    },
]);

// React 애플리케이션 렌더링
const App = () => {
    return <RouterProvider router={router} />;
};

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(<App />);

---

4. 단계별 설명

4.1 createBrowserRouter

• 역할: 라우트를 구성하여 브라우저 히스토리 기반의 라우터를 생성합니다.
• 형식: 배열 형태로 경로(path)와 해당 경로에 렌더링할 요소(element)를 설정합니다.
• 예:

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
    },
    {
        path: "/about",
        element: <About />,
    },
]);

4.2 RouterProvider

• 역할: createBrowserRouter로 생성된 라우터를 React 애플리케이션에 주입합니다.
• 사용법:

<RouterProvider router={router} />;

---

5. 중첩 라우팅

중첩 라우팅을 통해 부모-자식 관계의 라우트를 구성할 수 있습니다.

const router = createBrowserRouter([
    {
        path: "/",
        element: <Layout />, // 공통 레이아웃 컴포넌트
        children: [
            { path: "", element: <Home /> },
            { path: "about", element: <About /> },
            { path: "contact", element: <Contact /> },
        ],
    },
]);

Layout 컴포넌트 예:

const Layout = () => (
    <div>
        <header>Header</header>
        <main>
            <Outlet /> {/* 자식 라우트가 렌더링되는 자리 */}
        </main>
        <footer>Footer</footer>
    </div>
);

---

6. 데이터 로더 사용

createBrowserRouter는 라우트마다 데이터를 로드할 수 있는 **로더(loader)**를 지원합니다.

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
        loader: async () => {
            // 데이터를 비동기로 가져옴
            const response = await fetch("/api/home");
            return response.json();
        },
    },
]);

로드된 데이터 사용:

• useLoaderData 훅을 사용하여 데이터를 접근할 수 있습니다.

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

const Home = () => {
    const data = useLoaderData();
    return <div>{JSON.stringify(data)}</div>;
};

---

7. 에러 처리

각 라우트에 대해 에러 페이지를 정의할 수 있습니다.

const router = createBrowserRouter([
    {
        path: "/",
        element: <Home />,
        errorElement: <h1>Something went wrong!</h1>,
    },
    {
        path: "/about",
        element: <About />,
        errorElement: <h1>Page Not Found</h1>,
    },
]);

---

8. Protected Routes (인증 처리)

Protected Route를 구현할 때 loader를 사용하여 인증을 처리할 수 있습니다.

const router = createBrowserRouter([
    {
        path: "/dashboard",
        element: <Dashboard />,
        loader: async () => {
            const isAuthenticated = await checkAuth();
            if (!isAuthenticated) {
                throw new Response("Unauthorized", { status: 401 });
            }
        },
        errorElement: <UnauthorizedPage />,
    },
]);

---

9. 전체 코드 예제

import React from "react";
import ReactDOM from "react-dom/client";
import { createBrowserRouter, RouterProvider, Outlet } from "react-router-dom";

// 공통 레이아웃
const Layout = () => (
    <div>
        <header>Header</header>
        <main>
            <Outlet />
        </main>
        <footer>Footer</footer>
    </div>
);

// 페이지 컴포넌트
const Home = () => <h1>Home Page</h1>;
const About = () => <h1>About Page</h1>;
const NotFound = () => <h1>404 - Not Found</h1>;

// 라우터 정의
const router = createBrowserRouter([
    {
        path: "/",
        element: <Layout />,
        children: [
            { path: "", element: <Home /> },
            { path: "about", element: <About /> },
        ],
        errorElement: <NotFound />,
    },
]);

// 애플리케이션 렌더링
const App = () => {
    return <RouterProvider router={router} />;
};

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(<App />);

---

요약

1. 라우터 생성: createBrowserRouter로 라우트 정의.
2. 라우터 주입: <RouterProvider>를 사용하여 앱에 연결.
3. 중첩 라우팅: 부모-자식 관계로 라우트를 구성.
4. 로더: 데이터 로딩 및 인증 처리.
5. 에러 처리: 에러 발생 시 렌더링할 컴포넌트 정의.