<aside> 📃
React Query 시리즈
React Query로 상태 관리와 성능 최적화하기 1: React Query 소개
React Query로 상태 관리와 성능 최적화하기 2: useQuery
React Query로 상태 관리와 성능 최적화하기 3: useInfiniteQuery
React Query로 상태 관리와 성능 최적화하기 5: useQuery, useMutation 차이
</aside>
React Query(Tanstack Query)는 HTTP 요청을 관리하고 프론트엔드의 상태를 백엔드 데이터와 동기화하는 데 사용되는 강력한 상태 관리 라이브러리다. useEffect와 fetch를 사용한 전통적인 데이터 fetching 방식으로도 같은 기능을 구현할 수 있지만, React Query를 사용하면 개발자가 직접 상태를 관리하고 로직을 구현하는 대신, "무엇을 할지"만 명시하면 나머지는 라이브러리가 처리해준다.
React Query를 효과적으로 사용하기 위해서는 클라이언트 상태와 서버 상태의 차이를 이해하는 것이 중요하다. 클라이언트 상태는 브라우저 세션 내에서 완전히 제어할 수 있는 로컬 데이터를 의미한다. 예를 들어 폼 입력값, 테마 설정, UI 상태 등이 해당된다. 이런 데이터들은 예측 가능하고 안정적이고, 실시간 동기화나 캐싱이 필요하지 않다.
반면 서버 상태는 클라이언트 상태보다 더 복잡하다. 서버에 저장된 데이터는 여러 클라이언트가 동시에 접근할 수 있으며, 언제든 다른 사용자에 의해 변경될 수 있다. 게시글, 사용자 프로필, 설정 데이터 등이 그 예시다. 이런 데이터들은 네트워크 지연, 캐싱, 동기화, 업데이트 등 복잡한 경우들을 생각해야 한다. 특히 서버 상태는 시간이 지날수록 클라이언트에 저장된 데이터가 실제 서버의 데이터와 차이가 날 수 있고, 데이터의 불일치 문제의 원인이 될 수 있다.
기존의 상태 관리 라이브러리인 Redux나 MobX는 클라이언트 상태 관리에 초점을 맞추고 있어 서버 상태의 특성을 효과적으로 다루기 어렵다. React Query는 이러한 문제를 해결하기 위해 서버 상태만을 위한 전용 도구로 설계되었다. 캐싱, 백그라운드 업데이트, 자동 재검증, 낙관적 업데이트 등의 기능을 통해 서버 상태를 효율적으로 관리할 수 있게 해준다.
서버 상태 관리는 React Query 이전에 Redux와 Redux-saga, Redux-thunk 같은 미들웨어로 구현했다고 한다. React Query와 어떤 차이가 있는지 알아보자.
Redux-saga는 비동기 데이터 흐름을 제어하기 위한 미들웨어다. Generator 함수를 사용해 복잡한 비동기 로직을 선언적으로 작성할 수 있다. saga는 애플리케이션의 사이드 이펙트를 별도의 쓰레드처럼 관리한다.