리액트 쿼리를 이용하여 로딩, 에러처리를 구현해보자

개요

---

리액트 쿼리를 사용할 때, 데이터를 관리하면서 로딩, 에러 다양한 Status 값들을 쉽게 다룰 수 있다.

많은 옵션들이 존재하지만 주로 로딩, pending , error 에러를 표시할 때 많이 사용한다. Status 값을 활용해 예제코드를 작성해본다.

로딩, 에러 처리 구현하기

---

isPending , isError 값을 이용해서 구현할 수 있다. isPending 은 데이터가 아직 들어오지 않은 상태이니 로딩 처리를 구현할 수 있으며

isError 값을 사용하여 에러가 발생했을 때, 에러 처리를 구현 가능하다. 해당 상황들에 맞춰 적절한 메세지를 리턴해주면 된다.

이때 retry 라는 에러가 발생했을 때 재시도를 하는 옵션이 존재한다. 리액트쿼리에선 이 retry 디폴트 값은 3 이기에 0으로 조정하여 에러를 바로 확인할 수 있다.

export async function getPosts() {
  const response = await fetch(`${BASE_URL}/posts`);
	return await response.json();
}

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>
  );
}

위 코드에서 isPending, isError 가 해당 될 때 리턴 값을 설정하여 보여준다.

Loading 처리 확인하기

크롬 개발자 도구의 네트워크 탭에서 네트워크 속도를 Slow 3G 로 바꾸고 새로고침 하면 확인이 가능하다.

Error 처리 확인하기

쿼리 함수에서 의도적으로 에러를 발생하게 되면 확인이 가능하다.

export async function getPosts() {
  const response = await fetch(`${BASE_URL}/posts`);
  throw new Error('An error occurred!');
}