React Query (개념과 필요성에 대하여)
React Query?
-> 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어 주는 React 라이브러리.
(기존에 Redux, Mobx, Recoil과 같은 다양하고 훌륭한 상태 관리 라이브러리들이 있긴 하지만, 클라이언트 쪽의 데이터들을 관리하기에 적합할 순 있어도 서버 쪽의 데이터들을 관리하기에는 적합하지 않은 점들이 있어서 등장하게 됨. 예를 들어, 관리자 화면에서 동시에 두 명의 관리자가 같은 페이지를 바라보고 있는 상황에서 한 관리자가 유저의 데이터를 변경하면, 다른 관리자도 그 유저의 변경된 데이터를 바라볼 수 있어야 함. 이러한 유저의 데이터는 클라이언트 쪽보다는 서버 쪽에 좀 더 적합하다고 볼 수 있음)
React Query는 언제 사용해야 하는가?
- 클라이언트 데이터보다 서버 데이터에 의존적인 성향의 서비스일 경우.
- 클라이언트의 복잡도가 높지 않고, 각 페이지에서 공통적으로 사용하는 전역 상태 데이터를 많이 가지고 있지도 않을때.
- 서버의 응답을 Store에 저장할 필요가 없는 상황에서도 구조화를 위해 Action Types, Actions, Reducer를 만들고, Action을 호출하는 등의 불필요한 상황, 캐싱 처리 및 관리 문제 등이 존재할 때
React Query 를 사용해 보았을 때의 이점
- 프로젝트 구조가 기존보다 단순해졌습니다.
- 캐싱 처리가 더 간단해졌습니다.
- 직접 만들어서 사용했던 기타 기능들을 옵션으로 지원합니다.
- Redux와 Redux-Saga를 사용할 때는 Success, Failure 값을 useEffect의 deps로 전달해서 처리해야 하는 과정이 필요했었는데, 이 과정을 onSuccess와 onError로 간단하게 처리할 수 있었습니다.
출처:
https://tech.kakao.com/2022/06/13/react-query/
Redux (vs.) React Query
기존의 Redux는 React 개발자라면 반드시 사용해야 할 세트 같은 개념의 라이브러리였습니다. 데이터의 상태는 크게 각 컴포넌트에서 독립적으로 사용되는 로컬 상태와 전체 어플리케이션에서 공통으로 사용되는 글로벌 상태로 나눌 수 있는데요, Redux는 어플리케이션 전체에 하나의 store를 두고 거기서 공통의 상태를 관리해 주는 라이브러리입니다.
사실 Redux 자체도 굉장히 훌륭하고 아주 유용하게 쓰이고 있지만 Redux에서 상태 관리를 하기 위해서는 액션 처리, 리듀서에서의 작업 수행, 실제 처리 시의 dispatch 등 조금 복잡하게 코드를 작성해야 합니다. 심지어 서버 통신 같은 비동기 처리에서의 데이터 동기화 같은 경우 코드가 그다지 깔끔하게 동작하지 않습니다. 상태 관리는 대부분 서버 데이터를 효율적으로 사용하기 위해서 쓴다고 해도 과언이 아닌데 말이죠. 리듀서는 동기적으로 동작하지만 액션은 비동기로 동작하고, 스토어에 액션을 던지면서도 해당 상태가 정확히 어느 시점에 변경되는지 알 수 없는 어려움이 생기게 됩니다.
심지어 Redux 자체만으로는 비동기 작업을 수행할 수 없습니다. 이로 인해 redux-thunk나 redux-saga와 같은 미들웨어를 사용하여 작업을 위임할 수밖에 없었습니다.
Redux의 이러한 문제점을 해결하기 위해 React Query라는 data fetching 라이브러리가 등장했습니다. 이 라이브러리를 사용하게 되면 앞서 소개했던 Redux처럼 많은 코드를 작성할 필요가 없고, 어떤 데이터를 언제 fetch하는지만 작성하면 되기 때문에 보다 직관적인 프로그래밍이 가능합니다. 또한 동일한 API 호출이 여러 번 일어날 경우 한 번만 처리해 주기 때문에 불필요한 트랜잭션의 낭비를 막을 수 있습니다.
data fetching 라이브러리의 주된 장점은 다음과 같습니다.
1. 중복 API 요청 시 한 번만 처리한다.
2. 코드가 선언적이므로 가독성이 좋다.
3. 로컬 상태와 원격 상태를 동기화한다.
출처 :
https://velog.io/@green2902/Redux-VS-SWR-VS-React-Query