등장 배경

비동기 로직의 복잡성 해결

• 기존의 useEffect, useState를 사용한 비동기 데이터 처리 방식은 상태 관리가 복잡하고 코드 중복이 많아 유지보수가 어려웠다.
• Redux Thunk와 같은 미들웨어를 사용해도 비동기 로직의 테스트가 복잡하고 보일러 플레이
  트가 코드가 많이 생기기 때문에 더 효율적인 도구가 필요했다.

서버 상태 관리의 어려움

• 서버 상태는 클라이언트 상태와 달리 캐싱, 동기화, 재검증 등 관리해야 할 요소가 많아 기존 방법으로는 관리가 어려웠다.
• 이를 해결하기 위해 등장한 것이 TanStack Query로, 서버 상태 관리를 쉽게 해주고 복잡한 비동기 로직을 단순화 해준다.

주요기능

• Cache : 동일한 데이터를 여러 번 요청하지 않도록 데이터를 캐싱하여 성능을 향상 시킨다.
• Re-Fetching : 데이터가 변경되었을 때 자동으로 데이터를 re-fetching하여 최신 상태를 유지할 수 있다.
• Query Invalidation : 특정 이벤트가 발생했을 때 쿼리를 무효화하고 데이터를 다시 가져올 수 있다.

Overview

• TanStack Query는 웹 어플리케이션의 데이터 페칭 라이브러리로, 서버 상태를 쉽게 패칭 캐싱 동기화 및 업데이트를 할 수 있다.
  

서버 상태란?

• 통제하거나 소유할 수 없는 위치에서 원격으로 유지된다
• 페칭과 업데이트를 위해 비동기 API가 필요하다.
• 소유권이 공유되며 사용자가 모르는 사이에 다른 사용자가 변경 가능하다.
• 주의하지 않으면 애플리케이션에서 "out of date"(오래된,구식상태)가 될 수 있다.

서버 상태의 문제점

• 캐싱
• 동일한 데이터에 대한 여러 요청을 단일 요청으로 병합
• 백그라운드에서 "오래된" 데이터 업데이트
• 데이터가 "오래된" 시점 파악
• 데이터 업데이트를 가능한 빨리 반영
• 페이지네이션 및 lazy loading과 같은 성능 최적화
• 서버 상태의 메모리 및 가비지 컬렉션 관리
• 구조적 공유로 쿼리 결과 메모이제이션

참고자료

https://tanstack.com/query/latest/docs/framework/react/overview
https://frontend-manchoon.tistory.com/132