데이터 트랙 - TanStack Query
백엔드 전환자가 프론트에서 서버 상태를 다룰 때 마주하는 문제를 정리하는 입문 지도입니다.
React 화면에서는 API와 UI 사이가 가장 많이 무너지는 지점이 서버 상태 관리입니다. TanStack Query는 이 구간을 목적적으로 분리해 다루는 라이브러리입니다.
이 트랙이 다루는 질문
- 네트워크 요청은 같은 값이라도 언제 새로고침해야 할까?
- 같은 요청이 중복으로 왔을 때 결과를 어떻게 정합성 있게 다룰까?
- 실패한 요청, 오래된 응답, 캐시 데이터는 어떻게 구분할까?
- 화면에서 떠남/재진입 시 데이터는 어떻게 유지되고 갱신될까?
왜 별도 서버 상태 레이어가 필요한가
백엔드에서는 상태가 보통 한 출처에서 갱신됩니다. 프론트에서는 화면이 여러 지점에서 참조하기 때문에, 서버에서 받은 값도 화면 상태와 동일하게 취급하면 곧바로 불일치가 생깁니다.
핵심은 이 분리입니다.
- 서버 상태: API 호출 결과, 캐시 유효성, 재요청 시점
- UI 상태: 로딩, 빈값, 에러, 입력 임시값 같은 화면의 현재 동작 상태
TanStack Query는 서버 상태를 일관된 규칙으로 다루는 계층을 제공합니다.
프로젝트에서 반복되는 문제 지도
1) 상태 중복 호출과 비싼 재요청
요청이 발생할 때마다 네트워크를 신뢰해 다시 불러오면, 불필요한 비용이 쌓입니다.
TanStack Query는 요청 키를 기준으로 같은 조건의 결과를 공유해 중복 요청을 줄입니다.
2) 오래된 값과 갱신 타이밍의 충돌
데이터가 오래되면 과거 값이 화면에 남을 수 있고, 반대로 너무 자주 갱신하면 사용자 흐름이 흔들릴 수 있습니다.
이 라이브러리는 언제 신선하다고 보고 언제 다시 읽을지를 모델로 다루게 합니다.
3) 비동기 응답의 순서 충돌
네트워크는 완료 시점이 뒤섞일 수 있습니다.
동일한 키와 조건의 요청에서도 반환 순서와 화면 반영 시점을 제어하지 않으면 오래된 응답이 최신 화면을 덮는 문제가 생길 수 있습니다.
TanStack Query는 이 흐름을 예측 가능한 형태로 묶어줍니다.
4) 캐시와 무효화의 누락
서버 값이 변경되었는데 캐시가 그대로면 화면은 잘못된 상태를 보여줍니다.
변경 시점에 캐시 무효화와 갱신 경로를 맞추는 모델이 있어야 합니다.
핵심 정리
TanStack Query는 단순히 fetch를 감싼 유틸이 아니라,
프론트에서 서버 상태를 다루기 위한 규칙 레이어입니다.
백엔드 전환자 입장에서는 이렇게 정리하면 됩니다.
- 서버에서 들어오는 값은 UI의 최종 상태와 다를 수 있다.
- 화면은 캐시, 갱신, 실패, 다시 가져오기 정책의 산출물이다.
- 요청은 실행 자체보다 어떻게 공유·갱신·무효화되는가가 핵심이다.