[React-Router] loader를 쓰는 이유

맛없는콩두유·2025년 2월 2일

React react router

React Router에서 Loader를 사용하는 이유

React Router에서 loader를 사용하는 이유는 다음과 같습니다:

1. 데이터 로딩 분리

loader를 사용하면 데이터 로딩 로직을 컴포넌트 로직에서 분리할 수 있습니다. 이를 통해 컴포넌트는 데이터 로딩에 대한 의존성을 줄이고, 데이터를 받아서 렌더링하는 역할에 집중할 수 있습니다. 이렇게 하면 코드의 가독성과 유지보수성이 향상됩니다.

2. 페이지 전환 시 데이터 로딩

loader를 사용하면 페이지 전환 전에 필요한 데이터를 미리 로드할 수 있습니다. 이는 사용자 경험을 향상시킬 수 있는데, 예를 들어, 페이지 전환 시 데이터를 미리 로드해서 사용자가 빈 화면을 보지 않도록 할 수 있습니다.

3. 라우트 기반 데이터 로딩

loader는 라우트에 정의되므로, 특정 라우트에 접근할 때마다 해당 라우트에 필요한 데이터를 로드할 수 있습니다. 이는 라우트 기반으로 데이터를 효율적으로 관리할 수 있게 합니다.

4. 에러 핸들링

loader에서 데이터를 로드할 때, 에러가 발생하면 라우터에서 제공하는 에러 핸들링 메커니즘을 사용할 수 있습니다. 예를 들어, 데이터 로드 실패 시 에러 페이지를 보여줄 수 있습니다.

Loader를 사용하여 Fetch로 API를 호출하는 장점

loader를 사용하여 fetch로 API를 호출하는 주요 장점은 다음과 같습니다:

컴포넌트가 아닌 라우트 레벨에서 데이터를 로드함으로써, 데이터 로딩이 컴포넌트 렌더링과 별개로 이루어집니다.
데이터가 성공적으로 로드된 후에야 컴포넌트가 렌더링되므로, 데이터가 없는 상태에서의 빈 화면이나 로딩 스피너를 피할 수 있습니다.
loader에서 반환된 데이터를 컴포넌트에서 바로 사용할 수 있어, 데이터 로딩과 관련된 부가적인 코드 작성이 줄어듭니다.

이와 같이, loader를 사용하면 React 애플리케이션에서의 데이터 로딩이 더 체계적이고 효율적으로 이루어질 수 있습니다.

React Router에서 Loader를 사용하는 예시

App.js

import { createBrowserRouter } from "react-router-dom";
import RootLayout from "./layouts/RootLayout";
import HomePage from "./pages/HomePage";
import EventsRootLayout from "./layouts/EventsRootLayout";
import EventsPage from "./pages/EventsPage";
import EventDetailPage from "./pages/EventDetailPage";
import NewEventPage from "./pages/NewEventPage";
import EditEventPage from "./pages/EditEventPage";

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      {
        index: true,
        element: <HomePage />,
      },
      {
        path: "events",
        element: <EventsRootLayout />,
        children: [
          {
            index: true,
            element: <EventsPage />,
            loader: async () => {
              const response = await fetch("http://localhost:8080/events");

              if (!response.ok) {
                // 에러 처리 로직
              } else {
                const resData = await response.json();
                return resData.events;
              }
            },
          },
          {
            path: ":id",
            element: <EventDetailPage />,
          },
          {
            path: "new",
            element: <NewEventPage />,
          },
          {
            path: ":id/edit",
            element: <EditEventPage />,
          },
        ],
      },
    ],
  },
]);

export default router;

변경 전: Events.js에서 Fetch 사용 (Async/Await 사용)

기존 Events.js에서 fetch 함수를 사용하여 API를 호출하던 예시는 다음과 같았습니다:

import { useEffect, useState } from "react";
import EventsList from "../components/EventsList";

function EventsPage() {
  const [events, setEvents] = useState([]);

  useEffect(() => {
    const fetchEvents = async () => {
      const response = await fetch("http://localhost:8080/events");
      const data = await response.json();
      setEvents(data.events);
    };

    fetchEvents();
  }, []);

  return <EventsList events={events} />;
}

export default EventsPage;

변경 후: Loader를 사용하여 Data 받기

위의 코드를 loader를 사용하여 데이터를 받는 방식으로 변경한 예시는 다음과 같습니다:

import { useLoaderData } from "react-router-dom";
import EventsList from "../components/EventsList";

function EventsPage() {
  const events = useLoaderData();
  return <EventsList events={events} />;
}

export default EventsPage;

이와 같이, loader를 사용하면 컴포넌트가 아닌 라우트 레벨에서 데이터를 로드함으로써 데이터 로딩이 더 체계적이고 효율적으로 이루어질 수 있습니다. 또한, 데이터가 성공적으로 로드된 후에야 컴포넌트가 렌더링되므로, 데이터가 없는 상태에서의 빈 화면이나 로딩 스피너를 피할 수 있습니다