TanStack Query 적용해보기

TanStack Query를 사용하는 이유

웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 것을 쉽게 만들어주는 상태 관리 라이브러리다.

-> 즉 탠스택 쿼리는 “데이터 가져오기(Fetching)·캐싱·동기화·업데이트”를 아주 편하게 해준다. 

 

TanStack Query로 할 수 있는 것들

- 캐싱과 상태관리와 자동화

- 데이터 신선도 관리

- 중복 요청 & 성능 최적화

- 자동 리패칭

 

캐싱과 상태관리와 자동화, 데이터 신선도 관리

- TanStack Query는 서버에서 가져온 데이터를 쿼리 키(query key)를 기준으로 메모리에 저장(캐싱).

- 같은 키로 요청하면 네트워크 호출 대신 캐시된 데이터를 즉시 반환.

- TTL(Stale Time) 설정으로 데이터 유효기간 관리 가능. -> 이를 가지고 일정시간동안 캐시에 데이터를 유지시킬 수 있다.

서버가 DB에서 데이터를 가져올 때 임시 저장소를 만들어서 가져오는 것이 캐시다
매번 서버가 DB에 같은 요청을 보낼 필요가 없어진다는 매우 큰 장점이 있다. 

캐시

-> 이번 프로젝트 코드에 적용을 해봤다. 

import { FeedBackEntity } from "@/backend/feedbacks/domains/entities/FeedBackEntity";

import { getFeedBackById } from "@/libs/api/feedback.api";

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

export const useGetFeedBackById = (id: number) => {

const { data, isLoading, error } = useQuery<FeedBackEntity>({

queryKey: ["feedBack", id],

queryFn: () => getFeedBackById(id),

enabled: Number.isFinite(id) && id > 0,

staleTime: 5 * 60 * 1000, // 5분간 데이터를 fresh로 유지

gcTime: 10 * 60 * 1000, // 10분간 캐시 유지

});

return { data, isLoading, error };

};

-> 코드 설명을 간단히 하면

queryKey : 쿼리키 'feedback' 을 기준으로 같다면 데이터를 가져옴 
queryFn : 서버에서 데이터를 가져오는 함수 
enabled : true 일때만 실행시킴
staleTime : 캐시 데이터를 그대로 가져다 사용함 일정 시간 동안
gcTime : 데이터를 유지하는 시간 

 

중복 요청 & 성능 최적화

- 위 코드에서 const {data} = useGetFeedBackId(id)를 호출하면 함수에 안에 호출했던 키를 인식하고 이 키를 가지고 성능 최적화를 가능하게 해준다.

-> 만약 useGetFeedBackId를 중복 요청했을 때, tanStack Query는 해당키를 기준으로 네트워크 요청이 진행중인지 확인 -> 만약 진행중이면 요청을 보내지 않고 기존 요청을 참조한다고 한다. 

import { FeedBackEntity } from "@/backend/feedbacks/domains/entities/FeedBackEntity";

import { getFeedBackById } from "@/libs/api/feedback.api";

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

export const useGetFeedBackById = (id: number) => {

const { data, isLoading, error } = useQuery<FeedBackEntity>({

queryKey: ["feedBack", id],

queryFn: () => getFeedBackById(id),

enabled: Number.isFinite(id) && id > 0,

});

return { data, isLoading, error };

};

 

// A 컴포넌트

const A = () => {

const { data } = useGetFeedBackById(1);

return <div>{data?.gptResponseContent}</div>;

};

// B 컴포넌트

const B = () => {

const { data } = useGetFeedBackById(1); // A랑 같은 queryKey 사용

return <div>{data?.gptResponseContent}</div>;

};

-> 위와 같이 A, B 컴포넌트가 같은 키를 요청하면 동시에 마운티가 되더라도 useGetFeedBack(1)은 한번만 실행이 된다고 한다

 

자동 리패칭 (Refetching)

- 브라우저 포커스를 다시 얻었을 때 자동으로 데이터 갱신.

- 네트워크가 다시 연결됐을 때도 자동으로 재요청.

- refetchOnWindowFocus, refetchOnReconnect로 제어 가능.

import { FeedBackEntity } from "@/backend/feedbacks/domains/entities/FeedBackEntity";

import { getFeedBackById } from "@/libs/api/feedback.api";

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

export const useGetFeedBackById = (id: number) => {

const { data, isLoading, error, refetch } = useQuery<FeedBackEntity>({

queryKey: ["feedBack", id],

queryFn: () => getFeedBackById(id),

enabled: Number.isFinite(id) && id > 0,

// 👇 자동 리패칭 옵션

refetchOnWindowFocus: true, // 브라우저 포커스 시 자동 리패칭

refetchOnReconnect: true, // 네트워크 재연결 시 자동 리패칭

// 필요하면 주기적 리패칭도 가능

// refetchInterval: 10000, // 10초마다 자동 갱신

});

return { data, isLoading, error, refetch };

};