React-Query에서의 'isLoading' vs 'isFetching' 차이

React-Query는 현대적인 React 애플리케이션에서 데이터 페칭을 용이하게 하는 강력한 도구입니다. 최근 프로젝트에서 React-Query의 keepPreviousData 옵션을 사용하면서 흥미로운 발견을 했습니다. 특히, isLoading과 isFetching 상태 관리에 대한 이해가 중요하다는 것을 깨달았습니다.

isLoading vs isFetching: 차이점 이해하기

React-Query에서 isLoading은 쿼리가 처음 실행될 때 활성화됩니다. 이는 데이터가 아직 로드되지 않았음을 나타냅니다. 반면, isFetching은 쿼리가 실행되는 동안 언제든지 활성화될 수 있으며, 이는 데이터가 이미 로드되었거나, 백그라운드에서 새 데이터를 가져오는 중임을 의미합니다.

경험 공유: keepPreviousData 사용 시 isFetching의 중요성

keepPreviousData 옵션을 활성화하면 이전 쿼리 데이터를 유지하면서 새 데이터를 가져옵니다. 이때 isLoading 대신 isFetching을 사용하는 것이 더 적절합니다. 왜냐하면 isLoading은 초기 데이터 로드 시에만 활성화되지만, isFetching은 데이터 갱신 시에도 활성화되기 때문입니다.

예시 코드: keepPreviousData와 isFetching 사용하기

import { useQuery } from 'react-query';

function MyComponent({ postId }) {
  const { data, isFetching } = useQuery(
    ['post', postId],
    fetchPostById,
    { keepPreviousData: true }
  );

  if (isFetching) return <div>Loading...</div>;

  return (
    <div>
      <h1>{data.title}</h1>
      <p>{data.content}</p>
    </div>
  );
}

async function fetchPostById(postId) {
  const response = await fetch(`https://api.mysite.com/posts/${postId}`);
  return response.json();
}

위의 예시에서는 keepPreviousData를 사용하여 사용자가 다른 게시물을 선택할 때 이전 데이터를 유지합니다. 동시에 isFetching을 사용하여 새 데이터를 불러오는 동안 로딩 상태를 표시합니다.

결론

React-Query에서 keepPreviousData를 사용할 때 isLoading과 isFetching의 차이를 이해하는 것은 중요합니다. 이러한 이해는 사용자 경험을 향상시키고, 더 효율적인 데이터 페칭 전략을 구현하는 데 도움이 됩니다.

• isLoading 은 유저가 보기에 데이터를 가져오는 중인지 여부

• isFetching 은 프로그램 상 데이터를 가져오는 중인지 여부

"두 차이는 keepPreviousData 가 true 일 때, 확실하게 드러난다!"