Tanstack Query

primav·2025년 4월 3일

React

목록 보기

34/35

📌 Tanstack Query란?

Tanstack Query 공식 문서
웹 애플리케이션에서 서버 상태를 패칭, 캐싱, 동기화 및 업데이트 하는 작업을 아주 쉽게 해준다.

🎯 Tanstack Query 장점

간편한 데이터 관리
데이터 가져오기, 캐싱, 동기화, 업데이트 처리를 간편하게 할 수 있게 해준다.
실시간 업데이트 및 동기화
실시간 데이터 업데이트와 자동 동기화를 지원하여 서버와 클라이언트 데이터의 일관성을 유지한다.
데이터 캐싱
데이터를 캐싱하여 불필요한 API 요청을 줄이고 애플리케이션의 성능을 향상시킨다.
서버 상태 관리
서버 상태관리 (로딩중, 에러 성공 등의 상태)를 간편하게 처리할 수 있다.

📌 Tanstack Query 사용 이유

🎯 Tanstack Query 사용 전 : 기존 데이터 패칭 코드

Fetching 코드 작성

const getData = async () => {
	const data = await fetch("http://naver.com/user/saebom")
    				.then((response) => response.json());
    return data;
}

데이터를 담아 둘 상태 생성

const [data, setData] = useState();

useEffect를 이용해 컴포넌트 마운트 시 데이터 Fetching 후 상태 저장

하나의 데이터를 패칭함에 있어 작성되는 코드 라인 수가 많음
useEffect를 많이 사용하기 때문에 발생할 수 있는 side effect로 인해 코드의 흐름 파악이 어려움
한 페이지내에서 데이터 패칭을 하는 로직이 여러개가 된다면 관리하기가 어려움!!!

useEffect(()=> {
	getData()
  		.then((res) => setState(res))
  		.catch((err) => {
      						console.log(err.response.data)
    					});
}, []);

🎯 Tanstack Query 사용

Fetching 코드 작성

const getData = async () => {
	const data = await fetch("http://naver.com/user/saebom")
    				.then((response) => response.json());
    return data;
}

데이터를 Fetching 및 상태 저장

코드 라인 수 감소
useEffect 사용 안하므로 코드 흐름 파악하기 쉬움

const { data } = useQuery(["data"], setData);

📌 Query & Mutation

🎯 Query

데이터를 가져오고 캐싱한다.
GET으로 받아오는 대부분의 API에서 useQuery() 함수를 사용한다.

const { data } = useQuery(
  	queryKey,
  	queryFunction,
  	options,
)

첫번째 인자 : 응답 데이터의 Unique Key - 응답 데이터를 캐싱할 때 사용된다.
두번째 인자 : Promise 를 반환하는 함수 - 쿼리 요청을 수행하기 위한 fetch, axios
세번째 인자 : useQuery에 사용되는 옵션을 지정하는 객체
- data
- error
- isFetching, isLoading, isSuccess

🎯 Mutation

데이터를 업데이트하고 캐시를 업데이트 할 수 있다.
데이터 생성, 수정, 삭제 용으로 사용되며, POST, PUT, DELETE 요청시에 사용한다.

const { mutate } = useMutation(
 	 mutationFn,
	 options,
);

첫번째 인자 : Promise를 반환하는 함수 - fetch, axios
두번째 인자 : useMutation에 사용되는 옵션을 지정하는 객체

📌 데이터 캐싱

캐싱을 활용하여 불필요한 API 호출을 줄임으로써 전체적인 애플리케이션 성능을 향상 시킬 수 있다!!

🎯 staletime

캐시된 데이터의 유효 기간을 나타내는 옵션
호출한 데이터는 리액트 쿼리 자체적으로 저장하는데, staletime의 기본 값은 0으로 설정되어 있어, 데이터가 한번 캐시되면 즉시 만료되고 다시 요청된다.

이 값을 조정해서 데이터를 일정 시간 동안 캐시로 사용하고, 그 이후에만 다시 요청하도록 할 수 있다.
➡️ 데이터의 유통기한 !!

자주 변경되지 않는 데이터의 경우 캐시된 데이터를 사용함으로써 불필요한 네트워크 요청을 줄이고, 애플리케이션의 성능을 향상시킬 수 있다.

const { data } = useQuery(['data', getServerData,{
  staletime: 10 * 60 * 1000;
})

🎯 cachetime

cachetime은 캐시된 데이터가 얼마나 오랫동안 메모리에 유지될지를 나타내는 옵션
이 값을 설정하면 캐시된 데이터가 일정 시간 동안 메모리에 유지된 후 자동으로 삭제된다.

데이터가 일정 기간 동안 메모리에 남아 있게 함으로써 같은 데이터를 다시 요청할 때 캐시에서 가져오기 때문에 성능을 향상 시킬 수 있다.

const { data } = useQuery(['data', getServerData], {
  cachetime: 30 * 60 * 1000, // 30분
})

차이점

비교 항목	staleTime (데이터 유효 기간)	cacheTime (캐시 유지 기간)
기본값	0 (즉시 만료)	5분
역할	데이터가 신선한지(Stale 상태) 판단	캐시된 데이터가 메모리에 얼마나 남아 있을지 결정
데이터 요청	신선할 때는 요청 X,	만료되면 다시 요청 가능 (staleTime이 지나도 cacheTime 내에서는 캐시에서 사용 가능)
네트워크 요청	stale 상태가 되면 refetch 가능	cacheTime이 지나면 데이터 삭제 후 다시 요청 필요