로딩과 에러 처리 구현하기

리턴 값들 중 가장 많이 활용하는 것은 백엔드에서 받아 온 데이터가 있는 data와 그 데이터를 받아오는 과정에서 보게 되는 pending, error와 같은 status 관련 값일 것이다.

이번 포스팅에서는 이런 status 값을 활용하여 상황에 맞는 로딩과 에러 메세지를 보여주는 방법을 확인해보고자 한다.

isPending과 isError 값을 사용한 로딩과 에러 처리 구현은 다음과 같이 할 수 있다.

function HomePage() {
  const {
    data: postsData,
    isPending,
    isError,
  } = useQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
    retry: 0,
  });

  if (isPending) return '로딩 중입니다...';

  if (isError) return '에러가 발생했습니다.';

  const posts = postsData?.results ?? [];

  return (
    <div>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            {post.user.name}: {post.content}
          </li>
        ))}
      </ul>
    </div>
  );
}

💡 React-query에서는 에러가 발생하면 기본적으로 3번의 재시도를 하는데, 테스트 시에는 retry 횟수를 0으로 저장하면 에러 화면을 더 빠르게 확인할 수 있다.