[Tanstack-Query] Tanstack-Query로 가져온 데이터에 추가 정보를 덧붙이고 싶을 때

처음 Tanstack-Query를 공부할 때는 단순히 axios의 상위 버전 패키지인 줄 알았다.

axios가 get, post, put, delete 기능을 제공하여 다른 url에서 데이터를 가져오는데 이에 조금 더 옵션을 추가한 거 아닐까라는 단순한 생각에 접근했다가 Overview를 읽고 되게 신기해 했었던 기억이 있다.

TanStack Query (formerly known as React Query) is often described as the missing data-fetching library for web applications, but in more technical terms, it makes fetching, caching, synchronizing and updating server state in your web applications a breeze.

위에 문구를 한 단어로 축약하자면 Tanstack-Query는 서버에서 주는 데이터를 useState의 상태 변수처럼 사용할 수 있게 해준다.

다만 클라이언트에서는 상태 변수의 값을 사용자의 상호작용이나 시간에 따라 변경되지만 서버의 데이터 값은 꼭 사용자와의 상호작용을 통해 바뀌는게 아닐 때가 많다. 예를 들어 실시간으로 다른 사용자가 피드, 스토리, 영상을 올리는 인스타그램에서 이러한 목록의 값을 상태값으로 가지고 있다가 특정 시간마다 이 값이 변경되었는지 확인하고 변경되었다면 다시 받아온 다음에 상태 변수가 바뀔때마다 UI가 바뀌는 것과 마찬가지로 자동으로 UI에 반영된다.