React Query에서 데이터 캐시 관리하기: useQueryClient와 invalidateQueries

by

React Query는 데이터를 효과적으로 관리하고 가져오는 데 사용되는 강력한 라이브러리입니다. 이 라이브러리를 사용하면 데이터 캐싱, 무효화, 다시 가져오기 등을 간단하게 처리할 수 있습니다. 이번 블로그 포스팅에서는 React Query에서 데이터 캐시를 관리하는 데 도움이 되는 useQueryClient 훅과 invalidateQueries 함수에 대해 알아보겠습니다.


useQueryClient 훅 이해하기

useQueryClient 훅은 React Query 라이브러리에서 제공하는 훅 중 하나로, 현재 앱의 queryClient 객체에 접근할 수 있게 해줍니다. 이 객체를 사용하면 캐시된 데이터와 관련된 작업을 수행할 수 있습니다.



invalidateQueries 함수로 데이터 캐시 무효화하기

invalidateQueries 함수는 queryClient 객체에서 제공하는 함수 중 하나로, 특정 쿼리를 무효화하여 데이터를 새로 가져올 수 있게 합니다. 이 함수는 다음과 같은 상황에서 유용합니다.

  1. 사용자가 데이터를 업데이트하고 해당 변경 사항을 실시간으로 반영해야 할 때.
  2. 데이터가 만료되었거나 잘못된 정보를 표시하는 경우 캐시를 강제로 갱신할 때.
  3. 특정 동작 이후에 데이터를 다시 가져와야 할 때.



예제: useQueryClient와 invalidateQueries 활용

아래는 React Query를 사용하여 데이터를 가져오고, 데이터를 갱신하기 위해 useQueryClient와 invalidateQueries를 사용하는 간단한 예제입니다.

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

function Todos() {
  const queryClient = useQueryClient();

  const { data, isLoading, isError } = useQuery('todos', fetchTodos);

  const handleRefresh = () => {
    // 'todos' 쿼리를 무효화하고 다시 데이터를 가져오도록 지시
    queryClient.invalidateQueries('todos');
  };

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

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

  return (
    <div>
      <h1>Todos</h1>
      <ul>
        {data.map((todo) => (
          <li key={todo.id}>{todo.text}</li>
        ))}
      </ul>
      <button onClick={handleRefresh}>Refresh</button>
    </div>
  );
}

export default Todos;

위 코드에서는 useQueryClient 훅을 사용하여 queryClient 객체를 가져오고, invalidateQueries 함수를 사용하여 “todos”라는 쿼리를 무효화하고 데이터를 다시 가져올 수 있게 합니다. “Refresh” 버튼을 클릭하면 해당 함수가 실행되어 데이터를 다시 불러오게 됩니다.



결론

React Query의 useQueryClient 훅과 invalidateQueries 함수를 활용하면 데이터 캐시를 쉽게 관리하고 필요한 경우 데이터를 업데이트할 수 있습니다. 이를 통해 사용자 인터페이스를 보다 동적으로 제어하고 최신 정보를 표시할 수 있게 됩니다. React Query를 사용하여 데이터 관리를 효율적으로 처리해보세요!



Leave a Comment