TanStack Query 알아보기 1 (기본 사용법)

 

TanStack Query 📖

서버 상태를 관리하기 위한 라이브러리로 서버 상태를 페칭, 캐싱, 동기화, 업데이트하는 작업을 아주 쉽게 해 줍니다.

주요 기능

`데이터 캐싱`: 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상합니다.

`자동 리페칭`: 데이터가 변경되었을 때 자동으로 리페칭하여 최신 상태를 유지합니다.

`쿼리 무효화`: 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있습니다.

 

사용 방법 📖

설치

yarn add @tanstack/react-query

 

적용할 범위에 Provider를 이용해 적용합니다.

// main.jsx

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import "./index.css";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>
);

 

그리고 TanStack Query를 사용하면서 가장 중요한 훅 3가지에 대해서 알아보려고 합니다.

useQuery

데이터를 가져오기 위해 사용되는 Tanstack Query의 대표적인 훅입니다. `쿼리 키`와 `비동기 함수(패칭 함수)`를 인자로 받아 데이터를 가져오고 로딩 상태, 오류 상태, 데이터를 반환합니다.

import { useQuery } from "@tanstack/react-query";
import axios from "axios";

const App = () => {
  const fetchTodos = async () => {
    const response = await axios.get("http://localhost:4000/todos");
    return response.data;
  };

  const {
    data: todos,
    isPending,
    isError,
  } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });

  if (isPending) return <div>로딩중입니다...</div>;
  if (isError) return <div>데이터 조회 중 오류가 발생했습니다.</div>;

  return (
  	<></>
  );
};

export default App;

 

useMutation

데이터를 생성, 수정, 삭제하는 등의 작업에 사용되는 훅입니다. CUD에 대한 비동기 작업을 쉽게 수행하고, 성공 또는 실패 시에 추가적인 작업을 실행할 수 있기 때문에 `useQuery`와 함께 사용하는 대표적인 훅입니다.

 

❔비동기 작업을 쉽게 처리한다는 말 안에는

작업이 완료된 후에 관련된 쿼리를 무효화하는 과정이 포함되는데 이 역시도 핵심 개념이고 최신 데이터를 유지하는 데 필수적인 요소입니다.

 

import { useMutation, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";

const App = () => {
  const [todoItem, setTodoItem] = useState("");

  const addTodo = async (newTodo) => {
    await axios.post("http://localhost:4000/todos", newTodo);
  };

  const { mutate } = useMutation({
    mutationFn: addTodo,
  });

  return (
    <div>
      <h3>TanStack Query</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();

          const newTodoObj = { title: todoItem, isDone: false };

          // useMutation 로직 필요
          mutate(newTodoObj);
        }}
      >
  );
};

export default App;

 

invalidateQueries

특정 쿼리를 무효화하여 데이터를 다시 패칭 하게 하는 함수입니다. 주로 `useMutation`과 함께 사용해 데이터가 변경된 후 관련 쿼리를 다시 가져오도록 해 데이터가 항상 최신 상태로 유지될 수 있도록 해줍니다.

const queryClient = useQueryClient();

const { mutate } = useMutation({
  mutationFn: addTodo,
  onSuccess: () => {
    // alert("데이터 삽입이 성공했습니다.");
    queryClient.invalidateQueries(["todos"]);
  },
});

 

 

 

다음 게시물

TanStack Query 알아보기 2 (동작 원리)