React Query와 Axios를 Zustand 스토어와 함께 사용할 때 발생하는 오버헤드에 대해 탐색하는 글입니다. 이 글에서는 React Query의 사용 전 후 오버헤드를 측정하고, Axios와의 성능 비교를 통해 어떤 상황에서 각각을 선택하는 것이 최적의 성능을 제공하는지를 분석합니다.
코드: codesandbox
서론
React Query와 Zustand를 사용한 상태 관리는 웹 개발에서 중요한 고려 사항입니다. Axios나 Fetch와 같은 HTTP 클라이언트 라이브러리와 Zustand를 사용하여 API 호출과 데이터 캐싱을 처리하는 방법은 이미 잘 알려져 있습니다. 하지만, React Query의 도입이 가져오는 이점과 오버헤드에 대한 궁금증이 있었습니다.
React Query와 Axios 사용 시 오버헤드 분석
React Query의 작동 원리와 오버헤드
React Query는 내부적으로 Context API를 활용하여 데이터를 관리합니다. 이는 API 호출 시 지정된 key가 변경되지 않는 한, Context에서 데이터를 재사용함을 의미합니다. 이 과정에서 발생하는 오버헤드는 주로 JavaScript에서 큰 데이터를 함수에 전달할 때 발생하는 수준입니다.
Zustand와 Axios의 조합
Zustand에서 Axios를 사용하는 경우, 내부적으로 별도의 오버헤드 없이 데이터 패치 후 직접 스토어에 저장하게 됩니다. 이 방식은 React Query를 사용할 때보다 상대적으로 오버헤드가 낮습니다.
성능 측정 결과
성능 측정은 Chrome 브라우저의 개발자 도구에서 진행하였습니다. 측정 결과, React Query를 사용한 경우와 Axios를 Zustand 내에서 호출한 경우의 오버헤드를 비교하였습니다.
- React Query 사용 시: Data fetch 후 렌더링까지 약 3.38ms 소요, 내부 코드 실행으로 추가적인 0.59ms가 소요됨.
- Zustand와 Axios 사용 시: Data fetch 후 렌더링까지 약 0.13ms 소요, 내부 코드 실행으로 인한 추가 오버헤드 없음.
이러한 측정 결과는 데이터의 크기가 클수록 오버헤드의 차이가 더 벌어질 것임을 시사합니다.
결론
React Query와 Zustand를 함께 사용하는 것은 특정 상황에서 유용할 수 있으나, 성능 측면에서 Axios와 캐시 라이브러리의 조합이 더 나은 선택일 수 있습니다. 그러나 코드의 일관성과 관리 측면에서는 고민이 필요합니다. React Query의 특정 기능(예: refetch)이 필수적인 상황이 아니라면, Axios와 캐시 라이브러리를 혼합하여 사용하는 것이 성능과 유연성 측면에서 권장됩니다.
이 분석은 개발자들이 자신의 프로젝트 요구 사항에 맞는 최적의 데이터 패치 및 상태 관리 방법을 선택하는 데 도움이 될 것입니다.
