프로젝트를 진행하며 애플리케이션 기능이 많아지고 다루는 데이터가 복잡해지면서 한계를 느낄 때가 있다.
나는 데이터를 잘 다루기 위해 성격이 다른 클라이언트 상태와 서버 상태를 관리할 때 이 둘의 차이를 명확히 이해하고 분리하는 것이 중요하다고 생각한다. 그래서 서버 상태 관리에 대해서 공부해보았다.
서버 상태의 특성 이해하기
클라이언트 상태는 웹 브라우저 메모리에 존재하며 동기적으로 접근할 수 있다. 예를 들어 다크 모드 설정이나 입력 폼의 현재 값 같은 것들이다. 이 상태들의 오로지 클라이언트가 관리한다.
반면 서버 상태는 다르다.
첫째, 데이터가 사용자의 브라우저가 아닌 원격 서버에 위치한다.
둘째, 데이터를 가져오고 업데이트하는 과정이 모두 비동기적이다.
셋째, 이 데이터는 다른 사용자들과 공유될 수 있다.
마지막으로 가장 중요한 점은 내가 현재 화면에 보여주고 있는 데이터가 서버의 최신 상태와 다를 수 있다는 것이다.
과거 프로젝트에서 이 서버 상태를 일반적인 전역 상태 관리 라이브러리에 넣어 관리한 적이 있는데 이렇게 하니 데이터를 최신으로 유지하기 위해 언제 다시 요청해야 할지 판단하는 로직이 복잡하게 얽히기 시작했다. 로딩 중 상태와 에러 상태를 표시하기 위해 각각 별도의 상태 변수를 만들어야 했고 이로 인해서 컴포넌트 코드가 지저분해졌다.
이러한 문제점들을 해결하기 위해 등장한 것이 서버 상태 관리 전문 도구들이다. 이 도구들은 캐싱, 동기화, 백그라운드 업데이트 등 복잡한 비동기 데이터 관리를 대신 처리해 준다. 대표적인 도구들로는 아래서 다뤄볼 React Query와 SWR가 있다.
npm 다운로드 추이를 보면 SWR이 상당히 높은 사용량을 보여준다.
TanStack Query(React Query)
TanStack Query는 서버 상태와 클라이언트 상태를 동기화하는 데 필요한 강력한 기능을 제공한다. 데이터 패칭에 더해 서버 데이터의 캐싱과 재요청 로직을 세밀하게 제어할 수 있다.
데이터 갱신 빈도가 높고 여러 컴포넌트에서 동일한 데이터를 공유해야 하는 복잡한 프로젝트에서 빛을 발했다. 가장 큰 장점은 데이터의 신선도를 관리하는 방식이다. 설정한 시간이 지나면 데이터를 상한 것으로 간주하고 백그라운드에서 자동으로 최신 데이터를 받아온다. 또한 로딩과 에러 처리를 표준화된 훅으로 제공하여 보일러플레이트 코드를 획기적으로 줄일 수 있다.
기능이 방대한 만큼 처음 사용 시에는 다소 복잡하게 느껴질 수 있지만 강력한 DevTools를 지원하고 문서화가 잘 되어 있어 대규모 애플리케이션의 복잡한 요구사항을 충족하기에 적합하다.
SWR
Vercel에서 개발한 SWR은 TanStack Query에 비해 더 가볍고 직관적인 API를 제공하는 데 중점을 둔다. 이름에서 알 수 있듯이 HTTP 캐시 무효화 전략인 stale-while-revalidate를 차용했다. 캐시 된 데이터를 먼저 보여주고 백그라운드에서 서버에 재검증 요청을 보내 최신 데이터로 업데이트하는 방식이다.
나는 SWR를 비교적 규모가 작고 빠른 개발이 필요한 프로젝트에서 한 번 사용해보았는데 API가 매우 단순하여 러닝 커브가 거의 없고 데이터 패칭 코드를 간결하게 작성할 수 있었다. 복잡한 설정 없이도 데이터의 최신성을 유지하는 데 탁월하며 Next.js와 같은 환경과도 매끄럽게 연동된다. 하지만 TanStack Query만큼 세밀한 커스터마이징이나 방대한 기능을 제공하지는 않으므로 복잡한 상태 관리가 필요한 경우에는 한계가 있을 수 있다.
그렇다면 언제, 무엇을 사용해야 할까?
두 라이브러리 모두 훌륭한 도구이지만 프로젝트의 성격에 따라 선택이 달라져야 한다.
SWR은 가볍고 직관적인 사용성이 중요할 때 적합하다. 간단한 데이터 패칭 위주의 소규모 프로젝트나 빠르게 프로토타입을 만들어야 하는 경우 SWR의 단순함이 큰 장점이 된다.
반면 TanStack Query는 복잡한 데이터 관리와 세밀한 제어가 필요할 때 적합하다. 대규모 애플리케이션에서 서버 상태와 클라이언트 상태의 정교한 동기화가 필요하거나 캐싱 정책을 상황별로 다르게 가져가야 한다면 TanStack Query의 풍부한 기능이 필수적이다.
참고 사이트
https://npm-compare.com/ko-KR/axios-hooks,react-query,swr,use-http
