React Query의 처리중 상태 구분하기

React Query에서 isFetching, isLoading, isPending, isRefetching의 차이점과 활용법

React Query는 서버 상태를 효율적으로 관리할 수 있는 강력한 라이브러리입니다.

서버에서 데이터를 가져오거나 캐싱하는 작업을 단순화해 주며, 이 과정에서 발생하는 다양한 상태를 쉽게 관리할 수 있도록 여러 상태 플래그를 제공합니다. 이번 글에서는 React Query의 중요한 상태 플래그인 isFetching, isLoading, isPending, isRefetching에 대해 자세히 알아보겠습니다.

 

1. isFetching: 데이터 갱신 상태를 확인

isFetching은 쿼리가 백그라운드에서 데이터를 갱신 중인지 여부를 나타내는 플래그입니다. 예를 들어, 이미 캐시된 데이터를 사용하고 있으면서도 최신 데이터를 가져오기 위해 서버와 통신을 하는 경우 이 값이 true로 설정됩니다.

사용자에게 현재 화면에 보이는 데이터가 최신 상태로 갱신 중임을 알리고 싶을 때 사용합니다.

const { data, isFetching } = useQuery('todos', fetchTodos);

if (isFetching) {
  console.log('데이터를 갱신 중입니다...');
}

 

2. isLoading: 첫 데이터 로딩 상태를 확인

isLoading은 쿼리가 처음 데이터를 로드하고 있는지 확인하는 플래그입니다. 이 값은 쿼리가 처음 실행되어 캐시에 데이터가 없을 때, 서버로부터 데이터를 가져오는 동안 true로 설정됩니다.

사용자가 페이지를 처음 방문했을 때 데이터를 가져오는 동안 로딩 UI를 표시할 때 사용합니다

 

const { data, isLoading } = useQuery('todos', fetchTodos);

if (isLoading) {
  return <div>로딩 중...</div>;
}

 

3. isPending: Suspense와의 연동

isPending은 React의 Suspense 기능과 함께 사용할 때 나타나는 플래그로, 쿼리가 데이터를 가져오는 동안 컴포넌트가 대기 상태에 있는지 여부를 확인할 수 있습니다. 이 상태는 isFetching과 비슷하지만, Suspense를 사용하는 경우에만 활성화됩니다.

 

Suspense를 사용해 데이터 로딩 중 대기 상태를 관리하고자 할 때 사용합니다.

const { data, isPending } = useQuery('todos', fetchTodos, { suspense: true });

if (isPending) {
  return <div>데이터를 가져오는 중...</div>;
}

4. isRefetching: 데이터 다시 가져오기 상태를 확인

isRefetching은 기존 데이터를 다시 가져오는 중인지 확인할 수 있는 플래그입니다. 사용자가 "새로고침" 버튼을 클릭하거나 특정 이벤트에 의해 데이터를 다시 로드해야 할 때 유용합니다. 이 플래그를 통해 UI에서 다시 데이터를 가져오는 상태를 쉽게 반영할 수 있습니다. 즉, refetch함수를 호출한 경우에만 동작합니다.

사용자가 명시적으로 데이터를 갱신하고, 이 경우에 데이터를 가져오는 상태를 표시하고 싶을 때 사용합니다.

const { data, isRefetching, refetch } = useQuery('todos', fetchTodos);

if (isRefetching) {
  console.log('데이터를 다시 가져오는 중입니다...');
}

요약: 상태 플래그의 활용법

React Query는 다양한 데이터 로딩 상태를 관리하기 위해 여러 상태 플래그를 제공합니다. 각 플래그는 데이터 로딩 프로세스의 특정 부분을 다루며, 이를 통해 사용자에게 더 나은 경험을 제공할 수 있습니다.

• isFetching: 백그라운드에서 데이터가 갱신되고 있는지 확인.
• isLoading: 데이터가 처음 로딩 중인지 확인.
• isPending: Suspense와 함께 데이터 로딩 대기 상태를 관리.
• isRefetching: 기존 데이터를 다시 가져오고 있는지 확인.

 

결론 : 가볍게 쓴다고 하더라도 최소한의 개념은 알고 쓰자