[ReactQuery] isLoading과 isFetching의 차이점에 대해 알아보자

❗ isLoading, isFetching의 차이점

ReactQuery에서 isLoading 및 isFetching 속성은 데이터의 로드 상태를 나타내는 데 사용된다.

 

isLoading은 특정 쿼리에 대해 React Query에서 제공하는 속성이다. 쿼리가 현재 데이터를 가져오고 있는지 여부를 나타내는 boolean 값을 반환한다. 예를 들면 다음과 같다.

import { useQuery } from 'react-query';

function ExampleComponent() {
  const { data, isLoading, error } = useQuery('exampleData', fetchData);

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (error) {
    return <div>Error: {error.message}</div>;
  }

  return <div>Data: {data}</div>;
}

위의 예에서 'isLoading' 속성은 데이터를 가져오는 동안 로드 메시지를 조건부로 렌더링하는 데 사용된다.

데이터를 가져오면 로드 상태가 'false'로 설정되고 실제 데이터를 렌더링할 수 있다.

 

반면 isFetching은 React Query에서 전역 수준에서 사용할 수 있는 속성이다. 애플리케이션의 쿼리가 현재 데이터를 가져오고 있는지 여부를 나타낸다. 예를 들면 다음과 같다.

import { useQueryClient } from 'react-query';

function ExampleComponent() {
  const queryClient = useQueryClient();
  const isAnyQueryFetching = queryClient.isFetching();

  return <div>{isAnyQueryFetching ? 'Fetching data...' : 'Data loaded'}</div>;
}

이 예에서는 'queryClient'의 'isFetching' 메서드를 사용하여 현재 데이터를 가져오는 쿼리가 있는지 확인한다.

데이터를 가져오고 있는지 또는 로드가 완료되었는지를 나타내는 메시지를 조건부로 렌더링하는 데 사용할 수 있는 boolean 값을 반환한다.

 

정리하면

isLoading은 React Query에서 쿼리 수준에서 사용되는 속성이고 특정 쿼리가 현재 데이터를 가져오고 있는지 여부를 나타내고 특정 쿼리에 대한 로드 상태를 조건부로 처리할 수 있다.
isFetching은 React Query에서 전역 수준에서 사용할 수 있는 메서드이다. 애플리케이션의 쿼리가 현재 데이터를 가져오고 있는지 여부를 나타내고. 여러 쿼리에서 가져오는 데이터의 전체 로드 상태를 결정하는 방법을 제공한다.

❗ isLoading과 isFetching이 활용되는 부분

isFetching은 애플리케이션의 여러 쿼리에서 전체 데이터 가져오기 상태를 기반으로 전역 로딩 표시기를 표시하거나 UI 상태를 동기화하려는 경우 일반적으로 사용된다. 이를 통해 특정 로드 상태에 관계없이 쿼리가 현재 데이터를 가져오고 있는지 여부를 추적할 수 있다. 이는 데이터를 가져올 때 로딩 스피너 또는 진행률 표시줄을 표시하거나 모든 데이터 가져오기가 완료될 때까지 특정 UI 요소를 비활성화하는 것과 같은 시나리오에 유용할 수 있다.

반면 isLoading은 특정 쿼리의 로드 상태를 처리하는 데 사용된다. 이를 통해 특정 쿼리가 현재 데이터를 가져오는지 여부를 추적할 수 있으며 로드 표시기를 관리하거나 해당 쿼리와 관련된 UI 상태를 처리하는 데 유용하다. 예를 들어 특정 데이터를 가져오기를 기다리는 동안 로드 메시지 또는 콘텐츠를 표시하거나 특정 쿼리의 로드 상태에 따라 구성 요소를 조건부로 렌더링할 수 있다.

 

요약하면

isFetching은 전역 데이터 가져오기 상태를 처리하고 여러 쿼리에서 UI 상태를 동기화하는 데 사용되는 반면

isLoading은 특정 쿼리의 로드 상태를 처리하고 해당 쿼리와 관련된 UI 상태를 관리하는 데 사용된다.

 

---

그리고 자료를 찾아보다가 차이점을 와닿게 설명해주는 글귀가 있어서 가져와봤다 ! 

출처 : https://velog.io/@himprover/React-query-%EC%97%90%EC%84%9C-isLoading%EC%9D%B4%EB%9E%91-isFetching%EC%9D%80-%EB%AD%90%EA%B0%80-%EB%8B%A4%EB%A5%B4%EC%A7%80

React-query 에서 isLoading이랑 isFetching은 뭐가 다르지?