[Router] loader와 useLoaderData

오늘은 loader와 useLoaderData에 대해 알아보겠습니다.

 

 

[ loader ]

서버에 요청하지 않고 데이터를 가능한 한 빨리 가져오기 위해 react router dom 6.4v 부터는 client side browser를 제공하고 있습니다. 즉, 서버에 요청하지 않고 클라이언트 사이드에서 처리하기 때문에 속도 면에서 엄청난 이점이 생기게 됩니다. 

 

여기서 추가된 기능 중 하나인 loader는 컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달하는 역할을 수행합니다.

 

loader의 특징 

- loader의 호출 시점은 컴포넌트가 렌더링 되기 전 입니다.

- 각 파일에 loader라는 함수를 만든뒤 이를 export하여 사용하는 것이 일반적입니다. 

- loader 함수가 값을 return하면 useLoaderData()로 컴포넌트에서 데이터를 받을 수 있습니다.

- GET 요청을 하면 loader가 호출됩니다. 

 

 

📌 App.js

 

import { createBrowserRouter, RouterProvider } from "react-router-dom";
 
import RootLayout from "./pages/Roots";
import HomePage from "./pages/HomePage";
import Events from "./pages/Events";
import EventDetailPage from "./pages/EventDetailPage";
import NewEventPage from "./pages/NewEventPage";
import EditEventPage from "./pages/EditEventPage";
import EventsRootLayout from "./pages/EventsRoot";
 
const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { index: true, element: <HomePage /> },
      {
        path: "events",
        element: <EventsRootLayout />,
        children: [
          {
            index: true,
            element: <Events />,
            loader: async () => {
              const response = await fetch("http://localhost:8080/events");
 
              if (!response.ok) {
              } else {
                const resData = await response.json();
                return resData.events;
              }
            },
          },
          { path: "/events/:eventId", element: <EventDetailPage /> },
          { path: "/events/new", element: <NewEventPage /> },
          { path: "events/:eventId/edit", element: <EditEventPage /> },
        ],
      },
    ],
  },
]);
 
function App() {
  return <RouterProvider router={router} />;
}
 
export default App;
 

 

 loader: async () => {
              const response = await fetch("http://localhost:8080/events");
              if (!response.ok) {
              } else {
                const resData = await response.json();
                return resData.events;
              }
           }

 

 

📌 Events.js

 

import { useLoaderData } from "react-router-dom";
 
import EventsList from "../components/EventsList";
 
function EventsPage() {
  const events = useLoaderData();
  /*
  useLoaderData는 내가 loader를 사용한 컴포넌트, 
  즉 동등 수준의 컴포넌트나 그 자식에 해당하는 컴포넌트에서만 사용할 수있다. 
   */
 
  return <EventsList events={events} />;
}
 
export default EventsPage;
 

 

여기서 중요한 점은 useLoaderData는 내가 loader를 사용한 컴포넌트, 즉 동등 수준의 컴포넌트나 그 자식에 해당하는 컴포넌트에서만 사용할 수 있습니다. 

 

내가 loader를 사용한 컴포넌트보다 상위 컴포넌트에서는 사용할 수 없습니다.

 

ref: https://bbeeyaks-moment.tistory.com/entry/react-React-Router-v64-loaderactionfetchers