TanStack Query란 무엇일까?

TanStack Query : TS/JS, React, Solid… 등을 위한 강력한 비동기 상태 관리 라이브러리

<aside> 💡

TanStack Query의 공식문서에 따르면 종종 웹 애플리케이션의 누락된 데이터를 가져오는 라이브러리로 설명되기도 하지만, 보다 더 기술적인 측면에서 설명하자면, 웹 애플리케이션의 서버 상태 가져오기, caching, 동기화 및 서버 상태 업데이트를 쉽게 도와주는 라이브러리이다.

</aside>

위 설명에서 서버 상태를 가져온다는 내용이 있는데, 서버 상태란 무엇일까요? 흔히 React에서 useState로 관리하는 상태와는 다른걸까?

클라이언트 상태 vs 서버 상태

클라이언트 상태 (Client State)

<aside> 💡

클라이언트 상태는 사용자의 브라우저 내에서 관리되는 상태를 뜻한다. 이는 사용자가 페이지를 탐색하는 동안 유지되며, 페이지를 새로고침하거나 닫으면 사라진다. 클라이언트 상태의 종류에는

1. UI 상태 : 모달 창의 열림/닫힘 상태 및 스피너의 표시 여부
2. 폼 입력값 : 사용자가 폼에 입력한 데이터
3. 로컬 컴포넌트 상태 : 특정 컴포넌트 내에서만 사용되는 상태값
4. 전역 상태 : 여러 컴포넌트에서 공유되는 상태 (ex. 로그인 상태, 사용자 설정)

이러한 상태들이 클라이언트 상태에 포함된다. 주로 React에서 useState, useReducer 훅으로 관리하며, 전역 상태를 관리하기 위한 Recoil, Jotai, Zustand 라이브러리를 사용하여 관리하기도 한다.

</aside>

서버 상태 (Server State)

<aside> 💡

서버 상태는 서버에서 관리되며 클라이언트의 요청에 의해 전달되는 데이터이다. 이는 서버에 저장된 DB나 외부 API에서 가져온 데이터를 포함한다. 이 데이터들은 클라이언트 상태와는 달리 최신 상태를 항상 유지하기 위해 서버와 클라이언트간의 동기화가 필요하다. 서버 상태의 특징으로는

1. 비동기적 : 데이터를 가져오기 위해 클라이언트에서 네트워크 요청이 필요
2. 공유 가능 : 여러 사용자나 클라이언트에서 동일한 데이터를 접근할 수 있어야 함
3. 일관성 유지 : 서버에서 변경된 데이터는 모든 클라이언트에 일관되게 반영되어야 함

이러한 특징을 가지고 있다. 서버 상태는 주로 TanStack Query, SWR 등의 라이브러리를 사용하여 관리한다.

</aside>

이러한 서버 상태의 특성에 대해 파악하면, 서버 상태의 문제점에 대해서도 파악할 수 있을 것입니다.

• 서버 상태의 문제점

TanStack Query 왜 쓰는걸까?

앞선 공식문서에서의 설명과 서버 상태에 대한 정의에 따르면 TanStack Query는 비동기 작업을 처리하는 과정에서 필요한 기능들을 보다 효율적으로 할 수 있도록 도와주는 라이브러리입니다.

TanStack Query이전에는 비동기 작업을 어떻게 처리했을까요?

이를 설명하는것 만으로도 하나의 아티클을 쓸 수 있을 만큼 많은 내용들이 있지만 이를 간단하게 요약하자면 크게 3단계로 나누어 볼 수 있습니다.

1. 콜백 (Callbacks)

   <aside> 💡

   ES6 이전, 비동기 작업을 처리하기 위해 가장 많이 사용된 방법입니다. 콜백 함수는 비동기 작업이 완료되었을 때 호출되는 함수입니다. 하지만 콜백을 많이 사용하면 코드가 복잡해지고, 콜백에 콜백을 반복하는 콜백 지옥에 빠져 가독성이 매우 떨어질 수 있다는 단점이 있습니다.

   </aside>

   function fetchData(callback) {
     setTimeout(() => {
       callback('Data fetched');
     }, 1000);
   }
   
   fetchData((data) => {
     console.log(data); // Data fetched
   });