React Query의 useQuery에서 keepPreviousData 옵션 활용하기

by

React Query는 데이터 관리와 가져오기를 쉽게 만드는 라이브러리 중 하나입니다. 이 라이브러리의 useQuery 훅을 사용하면 데이터를 가져오는 동안 이전 데이터를 유지할 수 있는 keepPreviousData 옵션을 활용할 수 있습니다. 이 글에서는 이 옵션의 사용법과 유용성에 대해 알아보겠습니다.


keepPreviousData 옵션 소개

useQuery 훅에서 keepPreviousData 옵션은 기본적으로 false로 설정됩니다. 그러나 이 옵션을 true로 설정하면 현재 데이터와 함께 이전 데이터를 함께 반환합니다. 이것은 다음과 같은 상황에서 유용하게 사용됩니다:

  1. 사용자가 이전 페이지로 돌아갈 때, 이전 페이지에서 불러온 데이터를 유지하고 싶을 때.
  2. 데이터를 업데이트하거나 새로 고칠 때, 새로운 데이터와 이전 데이터를 비교하여 변경 사항을 처리하고 싶을 때.


keepPreviousData 옵션 활용 예제

아래는 keepPreviousData 옵션을 사용하여 데이터를 가져오고 이전 데이터를 활용하는 예제입니다.

import React from 'react';
import { useQuery } from 'react-query';

function TodoList() {
  const { data, isLoading, isError, isPreviousData } = useQuery(
    'todos',
    fetchTodos,
    {
      keepPreviousData: true,
    }
  );

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

  if (isError) {
    return <p>Error fetching data</p>;
  }

  if (isPreviousData) {
    // 이전 데이터를 사용하여 UI 업데이트 또는 처리
    return (
      <div>
        <h1>Todo List (Previous Data)</h1>
        {/* 데이터를 렌더링 */}
      </div>
    );
  }

  // 현재 데이터를 사용하여 UI 업데이트 또는 처리
  return (
    <div>
      <h1>Todo List (Current Data)</h1>
      {/* 데이터를 렌더링 */}
    </div>
  );
}

export default TodoList;

위 예제에서 isPreviousData 변수는 현재 데이터가 이전 데이터인지 여부를 나타내는 부울 값을 반환합니다. 이를 활용하여 데이터 변경에 대한 추가적인 로직을 구현할 수 있습니다.

결론

keepPreviousData 옵션을 활용하면 React Query에서 데이터를 가져올 때 이전 데이터를 함께 활용할 수 있습니다. 이는 사용자 경험을 개선하고 데이터 업데이트에 민감하게 대응하는 데 도움이 됩니다. React Query를 사용하면 데이터 관리가 더욱 간편해지며, keepPreviousData 옵션은 그 중 하나의 강력한 도구입니다.

이렇게 React Query의 useQuery에서 keepPreviousData 옵션을 활용한 예제를 통해 데이터를 효과적으로 관리하고 활용할 수 있습니다.


Leave a Comment