서버 상태와 클라이언트 상태의 근본적인 차이

웹 애플리케이션을 개발하다 보면 다양한 종류의 데이터를 다루게 됩니다. 이때 데이터의 성격을 크게 클라이언트 상태와 서버 상태로 나누어 이해하는 것이 매우 중요합니다. 다크 모드 여부나 모달 창의 열림 상태처럼 브라우저 내부에서만 완벽히 제어할 수 있는 값이 클라이언트 상태입니다.

반면 사용자 프로필 정보나 상품 목록처럼 원본 데이터가 외부 서버에 존재하는 데이터는 서버 상태에 해당합니다. 서버 상태는 내가 제어하지 않는 사이에 언제든 다른 사용자에 의해 변경될 수 있고, 데이터 요청과 응답 과정에서 비동기 처리가 필수적이라는 결정적인 차이가 있습니다.

useState와 useEffect만으로 서버 데이터를 다룰 때의 한계

과거에는 React Query나 TanStack Query 없이 React의 기본 Hook인 useState와 useEffect만을 활용해 서버 데이터를 불러오는 경우가 많았습니다. 하지만 이 방식은 몇 가지 심각한 불편함을 유발합니다. 단순한 데이터 요청 하나를 처리하기 위해서도 로딩 상태, 에러 상태, 결과 데이터를 저장할 상태 변수를 각각 만들어야 합니다.

게다가 동일한 데이터를 여러 컴포넌트에서 동시에 요청하면 불필요한 API 호출이 중복으로 발생하고, 최신 데이터를 유지하기 위한 복잡한 캐싱 로직을 직접 구현해야 하는 부담이 생깁니다. 이로 인해 상태 관리 라이브러리가 본래 목적인 UI 상태 관리를 넘어 서버 데이터 임시 저장소 역할까지 맡게 되면서 코드가 급격히 복잡해집니다.

TanStack Query가 제공하는 강력한 캐싱과 데이터 동기화

TanStack Query 사용법의 핵심은 서버 상태의 소유권을 클라이언트에서 내려놓고, 전문 관리 도구에 위임하는 데 있습니다. 이 도구는 백그라운드에서 데이터를 알아서 가져오고, 지정된 시간 동안 데이터를 보관하는 강력한 캐싱 기능을 기본으로 제공합니다.

데이터가 오염되었거나 오래되었다고 판단되면 사용자가 요청하지 않아도 알아서 최신 데이터를 다시 불러와 동기화해 줍니다. 덕분에 개발자는 네트워크 로딩 처리나 에러 핸들링, 데이터 업데이트 후 자동 갱신 같은 번거로운 작업에서 벗어나 온전히 화면 구성과 비즈니스 로직에만 집중할 수 있게 됩니다.

TanStack Query 사용법 기초: 실전 코드 흐름 이해하기

TanStack Query를 프로젝트에 도입하는 과정은 생각보다 단순합니다. 가장 먼저 앱의 최상단 컴포넌트를 QueryClientProvider로 감싸서 QueryClient 인스턴스를 애플리케이션 전체에 공급해 줍니다. 이 설정 한 번으로 전체 앱에서 효율적인 상태 관리 환경이 구축됩니다.

이후 데이터를 불러와야 하는 컴포넌트에서는 useQuery Hook을 사용합니다. 이때 데이터의 고유한 식별자인 queryKey와 실제 API를 호출하는 비동기 함수인 queryFn을 전달하면 됩니다. 조회를 넘어 데이터를 생성하거나 수정, 삭제할 때는 useMutation Hook을 사용하여 실행 후 기존 캐시를 무효화함으로써 화면을 실시간으로 손쉽게 갱신할 수 있습니다.

정리하며: 서버 상태 독립으로 더 깔끔해지는 프론트엔드

서버 상태와 클라이언트 상태를 명확히 분리하면 프론트엔드 아키텍처의 복잡도가 획기적으로 낮아집니다. React Query 시절부터 검증된 TanStack Query는 데이터 요청, 캐싱, 에러 처리, 상태 동기화까지 비동기 데이터 관리의 모든 과정을 표준화해 줍니다.

복잡한 비동기 로직 때문에 작성하던 수많은 보일러플레이트 코드를 줄이고, 사용자 경험을 한 단계 끌어올리고 싶다면 TanStack Query 사용법을 적극적으로 도입해 볼 가치가 충분합니다.