TanStack Query의 isFetching vs isLoading 차이점

TanStack Query의 isFetching vs isLoading 차이점

TanStack Query(구 React Query)는 비동기 데이터 관리를 강력하게 도와주는 라이브러리입니다. 데이터를 가져올 때 isLoading과 isFetching이라는 두 가지 상태를 제공하는데, 이 둘의 차이를 이해하는 것이 중요합니다.

1. isLoading이란?

isLoading은 데이터를 처음 로드할 때(initial loading) true가 됩니다. 즉, 쿼리가 처음 실행되면서 아직 캐시에 데이터가 없는 경우를 의미합니다.

예제 코드

isLoading이 true가 되는 경우

• 쿼리가 처음 실행될 때
• 캐시에 해당 데이터가 없는 경우

isLoading이 false가 되는 경우

• 데이터가 성공적으로 로드된 후
• 에러가 발생한 경우

2. isFetching이란?

isFetching은 백그라운드에서 데이터를 가져오는 중일 때 true가 됩니다. 기존에 캐시된 데이터가 있어도 새로운 데이터를 가져오는 동안 활성화됩니다.

예제 코드

isFetching이 true가 되는 경우

• 초기 로딩 시 (isLoading과 함께 true)
• 리패칭(refetch)이 발생할 때 (ex: 윈도우 포커스 변경, refetch 호출 등)

isFetching이 false가 되는 경우

• 데이터 패칭이 완료된 후
• 네트워크 요청이 실패하고 더 이상 재시도하지 않을 경우

3. isLoading vs isFetching 비교

속성isLoadingisFetching

의미	처음 데이터를 가져올 때	데이터 요청이 진행 중일 때
캐시 데이터 유무	캐시에 데이터가 없을 때 true	캐시에 데이터가 있어도 true
언제 true인가?	첫 번째 요청 시	리패칭 시에도 활성화
언제 false인가?	데이터가 로드되거나 에러 발생 시	데이터가 로드되거나 요청이 끝날 때

4. 실전 활용 예시

스켈레톤 UI 적용 (isLoading 사용)

isLoading을 이용해 처음 데이터를 불러올 때만 스켈레톤 UI를 보여줄 수 있습니다.

새로고침 아이콘 표시 (isFetching 사용)

isFetching을 이용하면 기존 데이터가 유지된 상태에서 추가 요청이 진행 중일 때 로딩 UI를 표시할 수 있습니다.

5. 결론

• **isLoading**은 첫 번째 데이터 로딩 여부를 나타냅니다.
• **isFetching**은 데이터 요청이 진행 중인지 여부를 나타냅니다.
• isFetching은 isLoading을 포함하는 개념이지만, 캐시된 데이터가 있는 경우에는 isLoading이 false일 수 있습니다.

이 두 개념을 적절히 활용하면 더욱 부드럽고 직관적인 사용자 경험을 제공할 수 있습니다!