240621 TIL

탠스택 쿼리(TanStack Query)는 React 애플리케이션에서 서버 상태를 관리하는 데 사용되는 강력한 데이터 패칭 라이브러리입니다. 이전에는 React Query로 알려져 있었으며, 서버에서 데이터를 가져오고 캐시하고 동기화하는 과정을 손쉽게 할 수 있도록 도와줍니다. 오늘 나는 탠스택 쿼리에 대해 배웠고, 이에 대한 TIL(Today I Learned)을 작성해보겠습니다.

TanStack Query의 주요 개념

1. Query: 서버에서 데이터를 가져오는 작업을 정의합니다. Query는 키와 fetch 함수를 사용하여 설정됩니다.

   • queryKey: 캐싱 및 리패칭을 제어하는 데 사용되는 고유한 식별자입니다.
   • queryFn: 서버에서 데이터를 가져오는 비동기 함수입니다.

2. Mutation: 서버에 데이터를 전송하는 작업을 정의합니다. 주로 데이터 생성, 업데이트, 삭제와 같은 작업에 사용됩니다.

   • mutate 함수는 서버와의 통신을 담당합니다.
   • onSuccess, onError 등의 콜백을 통해 요청 결과에 따른 후속 작업을 설정할 수 있습니다.

3. QueryClient: 쿼리와 뮤테이션의 상태를 관리하는 중심 객체입니다. QueryClient는 캐시 설정, 기본 옵션 설정 등을 관리합니다.

4. useQuery: React 컴포넌트에서 데이터를 가져오기 위해 사용하는 훅입니다. useQuery는 쿼리 키와 fetch 함수를 매개변수로 받습니다.

   const { data, error, isLoading } = useQuery(['todos'], fetchTodos);

5. useMutation: 데이터를 변형하기 위해 사용하는 훅입니다. useMutation은 변형 함수와 옵션을 매개변수로 받습니다.

   const mutation = useMutation(newTodo => axios.post('/todos', newTodo));

6. Query Invalidation: 데이터를 다시 가져오기 위해 쿼리를 무효화할 수 있습니다. 이는 데이터가 변경된 후 새로운 데이터를 가져오기 위해 주로 사용됩니다.

   queryClient.invalidateQueries(['todos']);

TanStack Query 사용 예시

간단한 Fetch 예시

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

const fetchTodos = async () => {
  const { data } = await axios.get('/todos');
  return data;
};

function Todos() {
  const { data, error, isLoading } = useQuery('todos', fetchTodos);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error occurred: {error.message}</div>;

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

Mutation 예시

import { useMutation, useQueryClient } from 'react-query';
import axios from 'axios';

const addTodo = async (newTodo) => {
  const { data } = await axios.post('/todos', newTodo);
  return data;
};

function AddTodo() {
  const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      // 새로운 데이터를 가져오도록 쿼리를 무효화
      queryClient.invalidateQueries('todos');
    },
  });

  const handleSubmit = (event) => {
    event.preventDefault();
    const newTodo = { title: event.target.elements.title.value };
    mutation.mutate(newTodo);
  };

  return (
    <form onSubmit={handleSubmit}>
      <input name="title" placeholder="New Todo" />
      <button type="submit">Add Todo</button>
    </form>
  );
}

QueryClient 설정 예시

import { QueryClient, QueryClientProvider } from 'react-query';

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // 5분
      cacheTime: 1000 * 60 * 10, // 10분
      refetchOnWindowFocus: false, // 창이 포커스될 때 리패칭 하지 않음
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Todos />
      <AddTodo />
    </QueryClientProvider>
  );
}

느낀 점

TanStack Query는 데이터 패칭과 상태 관리를 효율적으로 처리할 수 있도록 도와주는 매우 유용한 라이브러리입니다. 캐싱, 리패칭, 뮤테이션 관리 등의 기능을 통해 클라이언트-서버 통신을 쉽게 관리할 수 있게 해줍니다. 특히 서버 상태 관리를 React 컴포넌트에서 명확하고 직관적으로 처리할 수 있어 개발 생산성이 크게 향상됩니다.