[React] tanstackQuery란? ( useQuery, useMutation, API 연결)

TanstackQuery란?

서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리
(2023년 9월 react Query에서 Tanstack Query로 이름 바꿨다)

장점

1) 자동 데이터 캐싱

동일한 데이터에 대한 여러 요청을 단일 요청으로 중복 제거하여 성능 최적화

2) 에러 및 로딩 관리

isLoading, isError 같은 상태를 통해 로딩 중 상태와 에러를 간편하게 관리
오래된 데이터 관리

3) 상한 상태인지 여부를 통해 최신 데이터를 관리

• Stale: 데이터를 불러온 이후 새로운 요청이 필요할 가능성이 있는 상태
• Fresh: 현재 데이터를 유지해도 괜찮은 상태

4)무한 스크롤 및 페이지네이션 지원

useInfiniteQuery 훅을 통해 무한 스크롤이나 페이지네이션 기능을 쉽게 구현하고 성능을 최적화

공식 문서
https://tanstack.com/query/latest/docs/framework/react/installation

설치 방법

yarn add @tanstack/react-query

초기 세팅

import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
   
const queryClient = new QueryClient()
function App() {
  return
    <QueryClientProvider client={queryClient}>
    ... //root 컴포넌트
    </QueryClientProvider>
}

useQuery

서버로부터 데이터를 조회해올 때 사용

const res = useQuery({
    queryKey: queryKey,
    queryFn: queryFn
});

• queryKey : useQuery마다 부여되는 고유 키 값
• queryFn : Promise 처리가 이루어지는 함수. axios를 이용해 서버에 API 요청

사용 예시

export const useFetchUniversities = (query: string) => {
  return useQuery({
    queryKey: ["universities", query],
    queryFn: async () => {
      const { data } = await axiosInstance.get(`/api/university/list/${encodeURIComponent(query)}`);
      return data.result || []; //데이터 반환 (ts라 []추가)
    },
  });
};

import { useFetchUniversities } from "../apis/home/homeFetch";
const { data: universities, isLoading: isLoadingUniversities } = useFetchUniversities(search);

이렇게 하면 다른 페이지에서 조회해온 데이터를 손쉽게 사용할 수 있다

useMutation

데이터를 변경 작업을 위한 훅 (생성/ 수정/ 삭제할 때 사용됨)

• mutationFn : 변이를 수행하는 비동기 함수. 서버에 데이터를 보내거나 변경하는 작업 수행
  • 변이 : 서버와 상호작용을 통해 데이터를 생성, 업데이트, 삭제하는 작업

사용 예시

const deleteData = useMutation({
  	mutationFn: (id) => axios.delete(`api/delete/${id}`),
	onSuccess: () => { console.log('요청 성공') },
  	onError: () => { console.error('에러 발생') },
  	onSettled: () => { console.log('결과에 관계 없이 무언가 실행됨') }
})

• onSuccess: 변이 작업이 성공 했을때 실행
• onError : 변이 작업이 실패 했을 때 실행
• onSettled : 변이 작업이 성공 혹은 실패해도 항상 실행됨