- TanstackQuery - (1)2025년 02월 20일
- redpome
- 작성자
- 2025.02.20.:34
React Query라 불리던 TanstackQuery는 비동기 처리의 불편함을 해소하기위해 만들어졌다.
리액트 기준에서 useEffect와 useState를 통한 상태관리는 규모가 커질수록 관리가 어려워진다.
그리고 클라이언트-서버 모델의 관점에서 클라이언트와 서버 입장에서 상태를 관리해야하므로 이제는 이 두 영역으로 나누어 요소를 다뤄야한다.
TanstackQuery 개념 및 주요 기능
- 서버 상태 관리를 위한 라이브러리로서 데이터 페칭, 캐싱, 동기화, 무효화의 기능을 가진다.
- 코드의 유지 보수가 쉬워진다. => 새로운 기술의 등장은 항상 이전의 기술보다 효율적이어야한다.
- 동일한 데이터를 여러 번 요청하지 않도록 캐싱하여 성능을 향상시킨다.
useQuery
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> );
Provider를 통해 client에 queryClient를 주입하는 형태로 사용한다. 데이터를 가져오기 위한 훅으로서 쿼리, 비동기 함수(Patching 함수)를 인자로 받아 데이터를 받아오고 로딩,오류 상태의 반환과 데이터를 반환한다.
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>; } ... <ul> {todos.map((todo) => { return ( <li key={todo.id} }} > <h4>{todo.title}</h4> <p>{todo.isDone ? "Done" : "Not Done"}</p> ...
먼저 axios.get을 이용하여 URL로부터 요청을 보내고 data를 반환한다. useQuery의 핵심이 되는 부분만 보자면 다음과 같다.
const { data: todos, isPending, isError, } = useQuery({ queryKey: ["todos"], queryFn: fetchTodos, });
먼저 키워드를 정리해보았다.
- queryKey - ["todos"] 로 쿼리를 식별했다, 서버의 상태를 구분하는 이름으로 쓰인다
- queryFn - 실제 데이터를 가져오는 함수로서 fetchTodos가 가져오고있다.
3가지의 상태를 가져서 각 케이스에 맞는 로직을 작성할 수 있다, 데이터를 가져왔으면 구조분해 할당을 한 data,isPending,isError를 통해 로딩 화면이나 에러 표시 등을 할 수 있다. 서버에서 데이터를 조회하고 로딩/에러/성공 상태를 자동으로 관리한다.
useMutation
데이터를 생성, 수정, 삭제하는 작업에 사용되는 훅이고 비동기 작업을 수행하고 추가적인 작업을 수행할 수 있다.
비동기 작업을 쉽게 처리한다는 것은 작업 완료 후 관련된 쿼리를 무효화한다.
무효화한다는 의미는 기존에 캐싱된 데이터는 최신 상태가 아니니 서버에서 가져오도록 지시한다는 것이다.
서버에 데이터를 변경할 때 사용하므로 이하의 코드에서는 addTodo 함수를 전달하는 것을 볼 수 있다. 원하는 시점에 해당 함수를
호출하는 것으로 서버에 데이터를 보낸다.const { mutate } = useMutation({ mutationFn: addTodo, onSuccess: () => { // 뮤테이션 성공 후 todos 쿼리를 무효화 -> 자동으로 재요청 queryClient.invalidateQueries(["todos"]); }, });
앞서 useQuery에서 사용한 코드에 이어서 ["todos"]라는 queryKey를 이용하여 todos 데이터를 캐싱하였다.
그런데 todos에 새로운 코드가 추가되면 이미 캐싱된 데이터는 최신 상태가 아니므로 invalidate(무효화)하면 재요청(refetch)
하게된다.위의 코드에서는 addTodo라는 mutation 함수는 성공 시 todos 쿼리를 무효화하게된다.
invalidateQueries
특정 쿼리를 무효화하고 다시 fetching을 시키는 함수이다. useMutation과 함께 사용하면 데이터가 변경된 후 관련 쿼리를 다시 가져온다.
이어지는 코드들에서 queryKey의 ["todos"]와 관련된 캐싱 데이터를 '유효하지 않음' 상태로 표시하고, 자동으로 재요청을 하여
최신 데이터를 가져온다.무엇보다 수동으로 refetch 로직 없이도 데이터 변경 시의 UI를 렌더링할 수 있는 장점이 있다.
'내일배움캠프' 카테고리의 다른 글
아웃소싱 프로젝트 - (1) (0) 2025.02.27 MBTI 프로젝트 -(1):json-server와의 통신 (0) 2025.02.24 뉴스피드 프로젝트 - (2) (0) 2025.02.19 뉴스피드 프로젝트 - (1) (0) 2025.02.12 포켓몬 도감 트러블 슈팅 - 카드 중복 에러 (0) 2025.02.11 다음글이전글이전 글이 없습니다.댓글