사이드 프로젝트에서 도입한 tanstack query에 대해 정리해 보고자 한다. tanstack query는 서버 상태를 관리하는 라이브러리로 꽤나 인기가 있는 라이브러리이다.
프론트엔드 개발자라면 서버에서 받아온 데이터를 잘 관리해야 좋은 사용자 경험 줄 수 있다. 서버 상태 관리를 효율적으로 도와주는 tanstack query에 대해 알아보도록 하자.
tanstack query란?
tanstack query는 서버 상태를 효율적으로 관리할 수 있게 도와주는 라이브러리이다. 데이터 캐싱, 자동 업데이트 등 다양한 작업을 도와준다.
이전엔 react query라는 이름으로 불리다가 리액트 뿐만이 아니라 뷰, 앵귤러 등 다양한 곳에서 사용하여 이름을 tanstack query로 바뀌게 되었다.
사용 예제
다음의 예제와 같이 간단한 형태로 쿼리를 사용할 수 있다.
const { data, error, isLoading, isFetching } = useQuery(
['users'], // 쿼리 키
fetchUsers, // 데이터를 가져오는 비동기 함수
{
staleTime: 5000, // 캐시된 데이터를 5초 동안 유지 (단위: 밀리초)
}
);해당 useQuery하나가 tanstack query의 대부분이라고 할 수 있다. 자세한 사용법과 추가적인 api 등은 공식문서에서 참조하고, 나는 최대한 간단하게 알아보도록 하겠다.
쿼리 키
쿼리 요청을 식별하는 키가 존재한다. 해당 키로 데이터를 재사용할지 안할지 결정할 수 있다.
쿼리 함수
일반적인 axios, fetch 함수 등으로 서버에 요청하는 코드이다.
staleTime
데이터의 신선도를 결정하는 시간이다. 해당 시간이 지나면 오래된 데이터라고 판별하고, 새롭게 데이터를 받아올 준비를 한다.
실제 사용 경험
사이드 프로젝트에서 사용해 보면서, 어떠한 장점과 기능이 있는지 알아보겠다.
Fetch 데이터를 재사용할 수 있었다.
서버에서 응답받은 데이터를 재사용하는 것은 성능과 비용에 좋은 효과를 준다.
일명 캐싱이라고 하는 기능을 제공해 준다. 서버로부터 응답받은 데이터를 다시 사용하게 될 때, 캐싱되어 있는 데이터를 가져와 요청없이 그대로 재사용할 수 있었다.
네트워크 중복 호출 방지
이 항목에 대해서는 위 캐싱과 연관이 있다. 컴포넌트를 리렌더링 할 때, 서버에 요청을 하는 경우가 있을 것이다. 이 경우 매 번 쿼리함수를 실행하면 성능에 영향이 생길 것이다.
따라서, tanstack query는 새로운 데이터를 가져올 필요가 없다고 판단하면 쿼리함수를 실행하지 않는다.
🚩
useQuery는 다음과 같은 상황에는 쿼리 함수를 실행한다.
- 이전 요청과 쿼리 키가 다름
- 데이터 상태가 신선하지 않은 경우 (staleTime이 지난 상태)
데이터를 자동으로 최신화
유튜브에서 내가 영상을 새로고침 하지 않았는데도 불구하고, 영상의 조회수가 몇 분 간격으로 자동으로 바뀌는 것을 볼 수 있다. 이게 tanstack query를 사용한건지는 모르지만 이와 같은 기능을 그대로 구현할 수 있다.
staleTime이 지나면 tanstack query는 옵션에서 자동으로 다시 Fetch하는 기능을 제공한다. 이 기능 또한 사용할 곳이 꽤나 많았다.
다양한 api 제공
useQuery의 반환 함수 들을 보면 굉장히 다양하다. data, isPending, error, refetch 등 겨우 useQuery 하나로 데이터를 받아오고 있는 현재 상태가 어떤지, 에러가 뭔지 알려주는 등 필요한건 다 있다.
끝
나는 react query를 몰랐을 시절에 여러 궁금증이 있었다.
"User 데이터는 다양한 곳에서 사용되는데 그걸 컴포넌트에서 하나하나 다 요청해서 데이터를 사용해야 하나?"라는 질문에 User를 받아오면 이 데이터를 전역 상태로 관리하자 였다.
tanstack query는 나의 질문을 해결해 줄 뿐만 아니라 서버 데이터 상태를 관리 해주는 다양한 기능을 통해 나의 사이드 프로젝트의 완성도를 높여주었다!
