[2024.05.21] 챌린지반 복습_React-Router loader

useEffect를 사용할 때 비동기로 api를 받아오는 과정 때문에, 화면에 0.5초 정도 늦게 보이는 현상을 종종 볼 수 있었는데 react-router-dom v6버전의 loader를 사용하면 이를 해결할 수 있다.

React Router에서 loader의 사용

※ Loader란?

• 페이지가 완전히 그려지기 전 단계에서 할 작업(값이 아니라 작업임)
• 렌더링 전에 로더를 호출하고 그 응답까지 받아옴
• react-router-dom의 useLoaderData()를 호출해서 loader에서 작업된 값을 가져옴

 위의 사진의 경우 loader에 직접적으로 async 함수를 호출하여 값을 받아왔지만, 코드의 가독성 측면에서 아래와 같이 코드를 분리할 수 있다.

// postListPage.loader.js
export default async function postListPageLoader() {
  const url = "https://jsonplaceholder.typicode.com/posts";
  const response = await fetch(url);
  const data = await response.json();

  return data;

 // 변경된 router.jsx
     {
        path: "/posts/:postId",
        element: <PostDetailPage />,
        loader: PostDetailPageLoader,
      },

 

※ /:postId?

위 코드에서 path가 "/posts/:postId"인데, 이는 동적 라우팅으로 /posts라는 url 뒤에 라우팅 할 페이지가 많아 어떤 값이 들어올지 모를 때 사용된다. 이렇게 사용하면 들어오는 postId 값에 따라 자동으로 경로가 mapping 되어, 불필요한 코드를 줄일 수 있다.