<aside> 📌

</aside>

📚 Tanstack query란?

• Tanstack query는 서버로부터 데이터 가져오기, 데이터 캐싱, 캐시 제어 등 데이터를 쉽고 효율적으로 관리할 수 있는 라이브러리이다.
• React Query라는 이름으로 시작했지만, v4부터 Vue나 Svelte 등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되며 Tanstack Query라는 이름으로 변경됐다.

대표적인 기능

• 데이터 가져오기 및 캐싱
• 동일한 요청의 중복 제거
• 신선한 데이터 유지
• 무한 스크롤, 페이지네이션 등의 성능 최적화
• 네트워크 재연결, 요청 실패 등의 자동 갱신

데이터 캐싱

queryKey로 받아온 데이터를 저장한다. 만약 queryKey에 저장된 데이터가 없다면 서버로부터 받아오고, 있다면 캐싱된 데이터, 즉 queryKey와 일치하는 데이터를 사용한다.

import { useQuery } from '@tanstack/react-query'

export default function MyComponent() {
	const { data } = useQuery({
		queryKey: ['delay'],
		quertFun: async () => (await fetch('<https://api>')).json()
	})
	return <div>{JSON.stringify(data)}</div>
}

아래의 이미지를 보면 더 쉽게 이해할 수 있다.

Query Cache에 캐시된 데이터가 없는 경우(=queryKey와 일치하는 데이터가 없는 경우)에는 서버에 요청하여 데이터를 새로 갖고 온다. 이렇게 새로 갖고 온 데이터는 캐시되고, 그 다음 요청부터는 캐시된 데이터를 사용할 수 있다.

출처: https://www.heropy.dev/p/HZaKIE

반대로 Query Cache에 캐시된 데이터가 있는 경우에는 서버에 요청을 보내지 않고, 캐시된 데이터를 갖고 와서 사용하게 된다. 그렇기 때문에 같은 데이터를 가져오는 요청이 여러 번 발생해도, 캐시된 데이터를 사용하여 중복 요청을 줄일 수 있다.

출처: https://www.heropy.dev/p/HZaKIE

그렇다면 데이터가 한 번 캐시되면 서버로 더 이상 요청을 보낼 수 없을까?

데이터 신선도