[react/공부] tanstack 알아보기

tanstack 알아보기

 

 

---

       tanstack이란? 

tanstack은 캐쉬 저장소로, 기존에 API를 가져올 때 쓰던 fetch, useEffect의 기능을 한 번에 수행하는 역할을 한다.
여러 가지 메소드로 캐쉬를 변경, 삭제할 수 있고, API도 변경, 삭제, 데이터를 불러올 수 있다.

 

 

---

       사용법 

01 설치

npm install @tanstack/react-query

 

 

02 Provider

상위 컴포넌트에 가서 아래와 같이 프로바이더로 감싸주기

import "./index.css";
import App from "./App.jsx";

const queryClient = new QueryClient();

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

 

 

03 정보를 불러올 때 사용하는 useQuery

탠스택의 사용법은 크게 두 가지로 나뉜다.
하나는 GET과 함께 사용하는 useQuery이고, 나머지 하나는 PUT, PATCH, DELETE, POST 등 API에 값을 넣어 변경해야 할 때 사용하는 useMutation이다.

먼저 useQuery를 사용하는 방법은 아래와 같다.

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

const fetchData = async () => {
  const { data } = await axios.get("/api/data");
  return data;
};

const Component = () => {
  const { data, isLoading, error } = useQuery(["dataKey"], fetchData);

  if (isLoading) return <div>로딩중...</div>;
  if (error) return <div>에러 발생</div>;

  return (
    <div>
      <h2>데이터 로드 완료!</h2>
      <pre>{JSON.stringify(data, null, 2)}</pre> {/* JSON 데이터를 보기 좋게 출력 */}
    </div>
  );
};

export default Component;

** 캐싱 키는 항상 배열 안 문자열의 형태로 들어가야 한다.

이렇게 구조분해할당했을 때 data, isLoading, error를 주게 되는데, 원하는 곳에 갖다 쓰면 된다!

 

 

04 데이터를 변경할 때 사용하는 useMutation

POST(정보 생성), PATCH(수정), PUT(교체), DELETE(삭제) 등 정보를 변경해야 할 payload를 전달해야 할 때 사용한다.

import { useMutation } from '@tanstack/react-query';
import axios from 'axios';

const postData = async (newData) => {
  const { data } = await axios.post('/api/data', newData);
  return data;
};

const Component = () => {
  const mutation = useMutation(postData);

  return (
     mutation.mutate({ name: '새 데이터' })}>
      데이터 추가
    
  );
};

이렇게 onSuccess, onError를 반환하는데, 이를 try, catch처럼 사용하면 된다.

이 코드를 써준 후에 그 payload를 전달하는 역할은 아래와 같이 한다.

mutation.mutate({ name: '새로운 데이터' });

나는 이번 프로젝트에서 아직까진 onClick 콜백함수 안에만 써줬다.

form으로 정보를 넣어주는 경우(로그인, 회원가입)

 

 

---

       메소드 

01 세팅

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

const queryClient = new QueryClient();

 

 

02 메소드 종류

메소드	설명
queryClient.getQueryData(['캐싱키'])	데이터 가져오기
queryClient.setQueryData	캐시 직접 변경
queryClient.invalidateQueries	캐시 무효화
queryClient.refetchQueries	데이터 다시 패칭
queryClient.fetchQuery(쿼리키, 함수)	데이터 직접 가져오기
queryClient.removeQueries	캐시 삭제

 

 

03 메소드 차이점

set, invalidate, refetch가 아무리 봐도 기능이 똑같은 거 같아서 그 차이점을 알아봤다.

메소드	기존 데이터	API 재요청
setQueryData	기존 데이터 유지	재요청 없음
invalidateQueries	무효화	재요청
refetchQueries	유지	재요청

** setQueryData의 경우 old => [...old, new] 이렇게 써서 추가해주면 된다. 아니면 덮어쓰기 됨.

 

 

---

지난시간 zustand에 이어 tanstack을 알게되었는데 너무 유용하게 같이 사용할 것 같다.

이번에 프로젝트 하면서 두개 다 익숙해지면 좋겠다