React-Router-Dom 라이브러리의 기능 중 하나로 loader라는 녀석이 있다. loader는 각각의 라우터에 설정을 할 수 있으며, loader가 설정된 라우터는 렌더링 되기전에 데이터를 불러오고, 데이터가 준비되면 렌더링을 시킨다.

loader를 쓰기 위해선 라우터를 <BrowserRouter />가 아닌 React-Router-Dom 6.4 버전 이상에서 제공하는

• createBrowserRouter
• createMemoryRouter
• createHashRouter
• createStaticRouter

중 하나를 사용해야 한다.

사용 방법

loader 설정

const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        path: 'poll/:id',
        element: <PollPage />,
        loader: ({params}) => {
          return getPollById(params.id);
        },
      },
    ],
  },
]);

const AppRouter = () => {
  return <RouterProvider router={router} />;
};

데이터를 미리 불러오고자 하는 페이지에 loader를 넣은 뒤, 그 안에서 데이터를 반환해주면 된다.
return문에 올 데이터는 비동기 함수여도 상관없다!

loader: () => {
  return fetch("/getSomething"); 
}

데이터 사용

이제 미리 load했던 데이터를 사용해보자. react-router-dom에서 제공하는 useLoaderData Hook을 사용하면 된다. fetch를 반환한 경우에도 data.json()을 알아서 해주기 때문에 우리는 저 데이터를 그냥 json 데이터라고 생각하고 사용하면 된다.

const PollPage = () => {
  const poll = useLoaderData();
  
  // ....
}

언제 사용할까?

물론 서버 데이터를 불러올 때 컴포넌트 안에서 useEffect나, react-query 등을 사용해서 렌더링 후에 데이터를 불러오고, 데이터가 불러와지면 다시 조건에 맞춰 렌더링할 수 있겠다.

그러나 미리 데이터를 불러온 후 렌더링을 하면 그런 것들을 신경 쓸 필요가 없고, 나 같은 경우는 컴포넌트 안에 무조건 데이터가 있어야 유의미 했기 때문에 loader를 사용하였다.

https://reactrouter.com/en/main/route/loader