[React] Tanstack Query란

SungWoo·2024년 11월 12일

React react-query tanstack-query

React

목록 보기

5/16

Tanstack Query란

HTTP 요청을 전송하고 프론트엔드 사용자 인터페이스를 백엔드 데이터와 동기화된 상태로 유지하는데 이용하는 라이브러리

기존 이름 React-Query에서 Tanstack-Query로 변경됨
리액트 앱 내부에서 HTTP 요청을 간편하게 보낼 수 있게 도와주는 라이브러리
리액트 프론트엔드를 백엔드에 연결하기가 수월해지도록 도와준다.
기존 방식: useEffet, fetch

Tanstack Query를 사용해야 하는 이유

useEffect나 fetch를 사용하는 대신 Tanstack Query를 이용하면 코드가 매우 간결해지고 개발자로서 훨씬 수월하게 작업할 수 있기 때문

Tanstack Query에는 여러가지 고급 기능이 기본적으로 내장되어 있기 때문에 코드를 더욱 간결하게 작성할 수 있다.

예를 들어,

웹사이트를 이용하다가 다른 작업을 하려고 다른 탭으로 이동한 후 다시 웹사이트로 돌아왔을 때 refetch를 트리거 해서 데이터가 업데이트 된 경우 새 데이터를 가져와서 UI를 업데이트하는 기능
가져온 데이터를 캐시 처리하고 메모리에 저장해서 필요할 때 다시 사용하는 기능

이와 같이 섬세한 작은 기능들이 애플리케이션을 사용자 친화적으로 만들어주는데, 이러한 모든 기능을 혼자서 처음부터 제대로 빌드하려면 까다롭고 어렵기 때문에 Tanstack Query의 기능을 사용하면 코드를 간결하게 작성할 수 있고, 앱을 좀 더 효율적으로 만들어 줄 수 있다.

useEffet 사용 (기존)

async function fetchEvents() {
  setIsLoading(true);
  const response = await fetch('http://localhost:3000/events');

  if (!response.ok) {
    const error = new Error('An error occurred while fetching the events');
    error.code = response.status;
    error.info = await response.json();
    throw error;
  }

  const { events } = await response.json();

  return events;
}

useQuery (Tanstack-Query)

이 훅은 자체적으로 작동해서 HTTP 요청을 전송하고, 필요한 이벤트 데이터를 가져오고, 로딩 상태에 대한 정보를 제공한다.

Tanstack 리액트 쿼리 팀에서 만든 커스텀 훅
useQuery는 프로미스를 반환하는 함수를 필요로 한다.
useQuery에 객체를 전달함으로써 기능이 실행되도록 훅을 구성할 수 있다.

1) queryFn 프로퍼티

쿼리 함수를 의미. 이 함수를 이용하여 실제 요청을 전송할 때 실행할 실제 코드를 정의

Tanstack-Query에는 HTTP 요청을 전송하는 로직이 내장되어 있지 않다.
대신 요청을 관리하는 로직을 제공함으로써 요청과 관련된 데이터와 발생 가능한 오류를 추적하는 역할을 한다.

즉, 요청을 전송하는 코드는 직접 작성해야 한다. 이는 내장 함수인 fetch나 서드 파티 라이브러리인 axios를 이용할 수 있다.

2) queryKey 프로퍼티

useQuery를 사용할 때, 모든 쿼리, 전송하는 모든 GET HTTP 요청에는 쿼리 키가 존재한다. Tanstack Query는 내부에서 이 쿼리 키를 이용하여 요청으로 생성된 데이터를 캐시 처리한다.

나중에 동일한 요청(동일한 쿼리 키)을 전송하면 이전 요청의 응답을 재사용 할 수 있다.
리액트 쿼리를 통해 데이터를 저장하고 재사용하는 기간을 구성할 수 있다.
↪ "사용자에게 데이터를 더 빨리 제공할 수 있게 해준다."

이 키는 배열이며 리액트 쿼리는 이 값의 배열을 내부적으로 저장한다. 그래서 유사한 값으로 이루어진 유사한 배열을 사용할 때마다 리액트 쿼리는 이 배열을 확인하고 기존 데이터를 재사용한다.
키에는 값이 여러 개일 수 있으며, 문자열을 포함한 다양한 값을 사용할 수 있다.

위 두 프로퍼티와 함께 useQuery 구성을 완료하면 useQuery 실행을 통해 객체를 얻을 수 있다.

const { data, isPending, isError, error } = useQuery({
  queryKey: [],
  queryFn: fetchEvents,
});

data: useQuery가 반환한 객체에서 얻은 데이터
isPending: 요청이 여전히 실행 중인지, 응답을 받았는지 알려주는 값
isError: 오류 응답을 받은 경우 true
error: 발생한 오류에 대한 정보가 포함된 프로퍼티

리액트 쿼리와 useQuery 훅을 이용하려면 이러한 기능을 사용할 컴포넌트를 Tanstack Query가 제공하는 특수한 Provider 컴포넌트로 래핑해줘야한다.

QueryClientProvider, QueryClient

QueryClient를 인스턴스화해서 queryClient를 생성
RouterProvider를 QueryClientProvider로 래핑
QueryClientProvider의 client 프로퍼티를 queryClient로 설정

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

const queryClient = new QueryClient();

function App() {
	return (
		<QueryClientProvider client={queryClient}>
			<RouterProvider router={router} />
		</QueryClientProvider>
	);
}