1016 TIL-U

Section21: 리액트 라우터가 있는 SPA 다중 페이지 구축하기

TIL1) loader()데이터를 라우트 컴포넌트에서 사용하기

loader() 함수는 라우트에 진입하기 전 데이터를 미리 불러와서 컴포넌트가 렌더링될 때 해당 데이터를 사용할 수 있게 해준다. 주로 비동기 데이터를 가져오는데 사용되며, 이를 통해 사용자는 더 빠르고 매끄러운 사용자 경험을 느낄 수 있다.

사용 방법: loader() 함수에서 비동기 데이터를 반환하고, 해당 데이터를 컴포넌트에서 useLoaderData() 훅을 통해 사용할 수 있다.

import { useLoaderData } from "react-router-dom";

function MyComponent() {
  const data = useLoaderData();
  
  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.description}</p>
    </div>
  );
}

// loader 함수 예시
export const myLoader = async () => {
  const response = await fetch("/api/data");
  const data = await response.json();
  return data;
};

장점: 컴포넌트가 렌더링될 때 이미 데이터를 보유하고 있으므로 로딩 시간을 줄이고, 더 나은 UX를 제공할 수 있다.

TIL2) loader()함수가 실행되는 시기

loader() 함수는 라우터의 특정 라우트가 활성화되기 전에 실행된다. 이는 사용자가 해당 경로로 이동할 때 자동으로 트리거되며, 데이터 요청이나 비동기 작업을 처리하는 동안 컴포넌트는 대기 상태에 있다.

실행 시기: 페이지 전환이 발생하거나, 라우트 변경이 감지될 때 loader() 함수가 호출된다. 즉, 특정 라우트로 이동하기 전에 먼저 데이터를 가져와야 할 때 실행된다.

const routes = [
  {
    path: "/posts/:postId",
    element: <PostDetail />,
    loader: async ({ params }) => {
      const response = await fetch(`/api/posts/${params.postId}`);
      return response.json();
    },
  },
];

주의 사항: 데이터가 완전히 로드될 때까지 화면이 잠시 지연될 수 있으며, 이때 로딩 스피너 등을 표시해 사용자가 기다리는 동안 피드백을 제공하는 것이 좋다.

TIL3) 오류 데이터를 추출하고 응답 내보내기

라우터에서 발생하는 오류를 처리하는 방법 중 하나는 ErrorBoundary를 사용하는 것입니다. loader() 함수에서 오류가 발생하면 라우터는 해당 오류를 캐치하고 이를 ErrorBoundary 컴포넌트(오랜만이당)로 전달한다. useRouteError() 훅을 사용하여 오류 데이터를 추출할 수 있다.

오류 처리 방법: useRouteError() 훅은 라우트 컴포넌트에서 발생한 오류를 받아 처리할 수 있게 해주며, 이를 통해 사용자에게 명확한 에러 메시지나 대체 화면을 제공할 수 있다.

import { useRouteError } from "react-router-dom";

function ErrorBoundary() {
  const error = useRouteError();
  
  return (
    <div>
      <h1>Error occurred!</h1>
      <p>{error.statusText || error.message}</p>
    </div>
  );
}

응답 내보내기: loader() 함수에서 비정상적인 HTTP 응답을 반환할 수 있으며, 이를 throw new Response()를 통해 던질 수 있다. 이때 오류 데이터는 useRouteError()로 접근할 수 있다.

export const myLoader = async () => {
  const response = await fetch("/api/data");

  if (!response.ok) {
    throw new Response("Failed to fetch data", { status: response.status });
  }

  return response.json();
};

이러한 방법으로 오류 데이터를 처리하여 사용자가 오류 상황을 명확하게 인식할 수 있게 도울 수 있다.