loader & useLouterData

살펴보기

React Router는 라우팅을 위한 강력한 도구입니다. 라우팅을 사용하면 애플리케이션의 구조를 분리하고, 사용자에게 다양한 페이지를 제공할 수 있습니다.

React Router DOM v6에 새로 생긴 기능인 loader를 활용하면 라우트와 관련된 데이터를 더 쉽게 관리할 수 있습니다.
loader는 라우트의 데이터를 로드하기 위한 함수입니다.
컴포넌트가 생성되기 전에 컴포넌트에 데이터를 전달하는 역할을 수행합니다.

loader의 특징

• loader의 호출시점은 컴포넌트 렌더링 되기 전
• 각 파일에 loader라는 함수를 만든뒤 export하여 사용하는 것이 일반적
• loader 함수가 값을 return하면 useLoaderData()로 컴포넌트에서 데이터를 받을 수 있다.
• get요청을 하면 loader가 호출ㄷ된다.

//App.js

import { RouterProvider, createBrowserRouter } from "react-router-dom";
import HomePage from "./pages/Home";
import EventsPage from "./pages/Events";
import EventDetailPage from "./pages/EventDetail";
import NewEventPage from "./pages/NewEvent";
import EditEventPage from "./pages/EditEvent";
import RootLayout from "./pages/Root";
import EventsRootLayout from "./pages/EventRoot";
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;
                // 여기서 반환된 데이터가 EventsPage에서 useLoaderData를 통해 사용됨
              }
            },
          },
          { path: ":eventId", element: <EventDetailPage /> },
          { path: "new", element: <NewEventPage /> },
          { path: ":eventId/edit", element: <EditEventPage /> },
        ],
      },
    ],
  },
]);
function App() {
  return <RouterProvider router={router} />;
}

export default App;

//Events.js

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

function EventsPage() {
  const events = useLoaderData();// loader 함수에서 반환된 데이터를 받아옴
  return (

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

export default EventsPage;

EventsPage 컴포넌트는 useLoaderData 훅을 사용하여 EventsPage에 대한 라우터 설정에서 정의된 loader 함수가 로드한 데이터를 받습니다.

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

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

---

https://despiteallthat.tistory.com/244