🔥 백그라운드 가져오기 인디케이터

쿼리의 상태가 'pending'일 때 초기 로딩 상태를 표시하는 것만으로도 충분할 수 있습니다. 하지만 때로는 쿼리가 백그라운드에서 다시 가져오고 있다는 추가 인디케이터를 표시하고 싶을 수 있습니다. 이를 위해 쿼리는 'isFetching'이라는 불리언 값을 제공합니다. 이 값을 사용하면 상태 변수와 관계없이 가져오기 상태에 있음을 나타낼 수 있습니다.

다음은 이를 활용한 예제 코드입니다:

function Todos() {
  const {
    status,
    data: todos,
    error,
    isFetching,
  } = useQuery({
    queryKey: ['todos'],
    queryFn: fetchTodos,
  })
 
  if (status === 'pending') {
    return <span>불러오는 중...</span>
  }
 
  if (status === 'error') {
    return <span>오류: {error.message}</span>
  }
 
  return (
    <>
      {isFetching && <div>새로 고치는 중...</div>}
 
      <div>
        {todos.map((todo) => (
          <Todo todo={todo} />
        ))}
      </div>
    </>
  )
}
 
typescript복사

이 코드에서 우리는 쿼리의 상태에 따라 다른 내용을 표시합니다. 'pending' 상태일 때는 로딩 메시지를, 'error' 상태일 때는 오류 메시지를 보여줍니다. 그리고 데이터를 성공적으로 가져왔을 때는 할 일 목록을 표시하면서, 'isFetching' 값이 true일 경우 새로 고치는 중이라는 메시지도 함께 보여줍니다.

전역 백그라운드 가져오기 로딩 상태 표시하기

개별 쿼리의 로딩 상태 외에도, 백그라운드에서 실행 중인 쿼리를 포함해 어떤 쿼리라도 가져오기 중일 때 전역 로딩 인디케이터를 표시하고 싶을 수 있습니다. 이럴 때 'useIsFetching' 훅을 사용할 수 있습니다.

다음은 이를 활용한 예제 코드입니다:

import { useIsFetching } from '@tanstack/react-query'
 
function GlobalLoadingIndicator() {
  const isFetching = useIsFetching()
 
  if (isFetching) {
    return <div>쿼리가 백그라운드에서 가져오는 중입니다...</div>
  }
 
  return null
}
 
typescript복사

이 코드에서 'useIsFetching' 훅은 현재 실행 중인 쿼리의 수를 반환합니다. 이 값이 0보다 크면 하나 이상의 쿼리가 실행 중임을 의미하므로, 이때 로딩 메시지를 표시합니다. 이를 통해 애플리케이션 전체에서 데이터 가져오기 작업이 진행 중임을 사용자에게 알릴 수 있습니다.

이러한 방식으로 백그라운드 가져오기 인디케이터를 구현하면, 사용자에게 더 나은 피드백을 제공하고 애플리케이션의 상태를 더 명확히 전달할 수 있습니다.