React Query 는 왜 핫할까요? 가장 중요한 이유중 하나는 비동기 상태 관리 라고 생각합니다. 일반적으로 상태 관리에 필요한 상태의 대부분은 비동기 데이터(Api) 입니다. 이 비동기 데

React Query 는 왜 핫할까요? 가장 중요한 이유중 하나는 비동기 상태 관리 라고 생각합니다. 일반적으로 상태 관리에 필요한 상태의 대부분은 비동기 데이터(Api) 입니다. 이 비동기 데이터를 기존에는 'Redux'나 'MobX' 같은 클라이언트 상태관리 라이브러리 에 의존 했었습니다. 그런데 React Query 는 서버 상태를 관리해줌으로써, 클라이언트 상태관리와 서버 상태관리를 분리해서 관리가 가능 해졌습니다. 그 이외에도, 캐싱, 서버데이터 동기화, 동일한 데이터 라면 한번만 호출하는등, 비동기 호출에 관련된 다양한 기능을 제공 해줍니다. 또 비동기 성공, 실패 값을 onSuccess, onError 같은 콜백함수로 처리할수 있게 해줍니다. 기존에 Redux 같은 상태관리를 사용할때는 리액트 훅인 useEffect 로 부수효과를 주었어야 했는데 말이죠. 다만, 리액트쿼리 는, 데이터가 오래되었다고 판단되면 자동으로 background update(기본 캐시 만료 기간 5분) 을 합니다. 만약 유저가 비동기 데이터 호출 이후 해당 데이터의 폼 양식 수정 작업을 하고 있는 와중에 background update 로 인한 refetch 이 일어난다면 입력중이던 상태값이 날아갈수 있습니다. 이럴때는 staleTime: Infinity 옵션을 줌으로써 자동 background update 기능을 꺼주어야 합니다. 이런 유의사항만 잘 숙지해서 사용한다면 React Query 는 리액트 에서의 비동기 상태관리를 편하고 효율적으로 관리할수 있도록 도와줍니다. 아직 실무 프로젝트에 도입하지 않았다면 도입해보시는것을 적극 추천드립니다.