React Query와 Axios에 대한 개인적인 생각

오늘은 개인적으로 React Query 라이브러리가 끌리지 않는 이유에 대해 적어보려고 한다. 사실 React Query 라이브러리가 나쁘다고 생각하지 않으며 캐싱, 데이터 fetching 부분에서 좋다고 본다. 정말 지극히 개인적인 의견에서 적어보는 글이다. 

 

https://ravirathore.com/reactjs/react-query-vs-axios/

다음글에 따르면 리액트 쿼리의 경우에는 '비동기 데이터 가져오기' '캐싱'을 목적으로 사용하며 Axios는 일반적인 HTTP 요청을 자바스크립트 환경에서 하기위해 사용한다고 한다. 또한 React Query는 리액트를 중심으로 하지만, Axios는 자바스크립트 기반의 프레임워크에서 모두 사용할 수 있다. 

 

1. 캐싱의 부분에서 리액트 쿼리는 빌트인 기능을 제공하지만, Axios는 직접 관리해야 한다.

2. 리액트 쿼리는 상태관리 훅을 제공하지만, Axios는 요청과 응답 핸들링에 초점을 맞춘다.

3. 리액트 쿼리는 자동적인 refetching이 가능하지만, Axios는 이러한 백그라운드 refetching 개념이 존재하지 않는다. 

 

결론적으로 React Query는 캐싱에 대한 빌트인 기능을 제공하고, 상태 관리 훅을 제공한다. 자동적인 refatching 기능이 존재한다. 또한 리액트 환경에서만 사용할 수 있다. 리액트에서 사용하는 스타일이고 여러 기능들을 제공한다. 반면 Axios는 일반적인 JS기반 프레임워크에서 모두 사용할 수 있고 범용적이다. 캐싱에 대한 개념이 따로 없어서 직접 관리해야 하고, HTTP 라이브러리에서 일반적으로 흔히 보는 스타일이다. 

 

나 역시 개인적으로 Front End 개발을 접하면서 두 라이브러리를 접해본 경험이 있으나 주로 Axios로 개발을 했다. 그 이유는 내가 근본 프론트엔드 개발자가 아니라 그런지는 모르겠으나, React Query 특유의 '리액트'스러운 느낌이 낯설게 느껴졌다. 애초에 게임 개발부터 시작해서 안드로이드 네이티브, Flutter 프레임워크 등을 접해본 내 기준에서는 빌드 함수 내에서 HTTP 통신 처리를 한다는 것부터가 이상해보인다. 

 

아무리 내부적으로 캐싱을 해주니까 동일한 콜을 2번 다시 호출하지 않는다고는 하더라도, 그냥 build 함수에 API를 호출하는 형태를 다른 프레임워크에서 한번도 본 적이 없어서 너무 낯선 것이다. 캐싱의 개념이 존재하지 않는다면 절대 사용할 수 없는 방식일 것이다. (build -> API 통신으로 데이터 받아서 뷰에 뿌리기 -> build ... 무한 반복) 다른 프레임워크에서는 보통 초기화 함수에서 호출하고 변경되었을 때, 다시 호출하는 정도가 아닐까 싶다. 

 

이러한 이유 때문에 나는 리액트 쿼리를 선호하지 않는다. 단순하게 말하면 React Query가 너무 React스러워서 기피하는 경향이 있다. 비슷한 맥락에서 사실 JS의 fetch함수도 그렇게 좋아하지 않는다. 왜냐하면 너무 JS스럽거든.. 내 개발자 정체성 자체가 FE에 특화가 되어 있더라면 어떤 방식을 사용하든지 FE기준으로 생각할 것 같다. 근데 나는 애초에 다양한 분야를 두루두루 개발한 사람인지라, 특정 분야에 너무 특화된 문법적인 컨벤션 or 방식을 선호하지 않는다. 그렇다고 JS 코드 자체를 내가 원하는 언어에서 쓰던 스타일 그대로 작성하자는 소리는 아니지만, 어느 정도 통일성을 맞출 수 있다면 그러한 방식을 선호하는 편이다. 

 

이는 나의 개인적인 의견일 뿐이고, 사실 어떤 라이브러리를 사용하여 상태관리를 하든 본질은 변하지 않는다고 생각한다. 하나의 도메인내 에서 HTTP 통신에 사용할 수 있는 라이브러리가 여러 가지 있으니 말이다. 회사에서 사용하는 라이브러리가 무엇인지에 따라 맞출 수도 있는거고, 내 개인 프로젝트라면 선호도에 따라 라이브러리를 고를 수 있는 것이다. 아무튼 나는 Axios 스타일이 더 익숙한 편이라 개인적으로 선호한다(FE 코드 쪽은 useEffect, useState같은 기본 Hook에다가 Axios로 통신해서 데이터를 뿌리는 스타일이 익숙함)