TanStack Query란?
TanStack Query는 React Query가 확장되면서 이름이 바뀐 라이브러리입니다.
단순히 fetching, 캐싱, 동기화만 지원하는 것이 아니라 페이지네이션, 무한 스크롤, 다양한 캐시 전략 등 성능 최적화를 위한 기능까지 제공합니다.
원리
데이터를 가져올 때는 Query Key라는 고유 키를 사용하여 이미 캐시에 데이터가 있다면 새로 서버에 요청을 보내지 않고 캐시된 데이터를 반환합니다.
캐시는 fresh / stale 로 사용 가능 상태에 따라 구분하고 새로운게들어오면 바뀌는시간 staleTime 메모리에 캐시가 남아있는 시간 cacheTime이 있습니다.
즉, 매번 서버를 호출하지 않고 필요할 때만 요청하기때문에 캐시 재사용과 시간 비용 측면에서 효율적입니다.
언제 사용되는지
데이터를 변경하고 캐싱을 업데이트하며 리스트, 페이지네이션, 무한 스크롤과 같은 기능을 구현할 때 사용합니다.
또한, 자동 캐싱하여 불필요한 API 호출을 줄여 매번 긴 코드로 요청 로직을 작성하지 않아도 됩니다.
왜 사용하는가
기존에는 직접 서버 데이터를 동기화해야했지만 이 과정에서 불필요한 요청이나 복잡한 코드 관리가 발생합니다.
하지만, TanStack Query를 사용하면 Query Key에 따라 공통 데이터를 자동적으로 공유하고 단순한 코드 구조로 캐싱 + 자동 동기화까지 가능합니다.
예를 들어 A 컴포넌트와 B 컴포넌트가 같은 데이터를 보여준다고 하면
TanStack Query를 사용하여 한쪽에서 즐겨찾기 업데이트시 서버와 캐시가 자동 업데이트가 되고 같은 Query Key를 사용하는 모든 컴포넌트가 자동 동기화가 된다.
느낀점
이번엔 tanstack query가 뭔지와 동작원리와 같은 개념 정도로만 공부해보고 정리해봤는데 더 깊이 공부해서 보강된 내용으로 다시 적어볼게요
지금까지는 단순한 API 요청에 큰 어려움이 없었지만, 실제 서비스나 대규모 프로젝트에서 API 요청이 많아지고 복잡해질때 TanStack Query를 사용하면 더 빠르고 효율적인 코드를 작성할 수 있고 사용자 경험 향상까지 이어질 것이라 생각이 듭니다.
앞으로는 단순한 기능 구현을 넘어, 더 효율적이고 성능 좋은 코드를 작성하는 방법을 계속 고민하고 싶습니다.
