RTK Query VS React-Query 👊🏻

가장 최근 Redux-toolkit 찍먹하는 법에 대해 게시글을 작성했다.

그때 RTK Query에 관해 간단하게 정리했었는데, 정리하면서 든 생각은 '어? 이거 뭔가 역할이 React-Query와 비슷한 것 같은데, 어떤 게 다른지 한 번 찾아봐야겠다'였다.

그래서 이번 게시글을 통해 RTK Query와 React-Query 차이점 그리고 사용하는 상황에 대해 정리해보고자 한다.

위 사진 2가지는 내가 정리했던 RTK Query와, React-Query에 관한 내용을 캡쳐해 온 것이다!

참고: RTK Query 공식문서

부족한 부분에 대한 보충설명 댓글은 언제나 환영입니다! ✨

---

🤓 둘의 공통점

• 비동기 데이터 통신 관리
  서버와의 API 호출 및 데이터 요청과 응답 처리를 쉽게 관리할 수 있도록 한다.

• 자동 캐싱 및 최적화(요청 중복 방지 등..)

• 상태 관리의 단순화
  상태 관리를 단순화하고, 코드의 가독성과 유지보수성을 향상시키는 데 초점을 맞춘다.

등의 공통점을 갖고 있다!

🤓 둘의 차이점

상태 관리

[RTK Query (Redux)]
RTK Query는 Redux가 제공하는 기능 중 하나이므로, Store 즉 상태 저장소가 존재한다. 그래서 Redux가 적용된 프로젝트에 추가하기가 쉽다.

[React-Query]
React-Query는 상태를 저장하는 저장소가 따로 없고, 어떤 상태인지 파악하여 관리하는 상태 관리 라이브러리 중 하나로 보면 된다.

API 호출법

[RTK Query (Redux)]
RTK의 핵심! createAPI 메소드를 사용한다.
createAPI를 사용하여 코드를 작성할 때, endpoints 파라미터 항목을 작성할 수 있는데 이때 정의된

[React-Query]
상황에 따라 useQuery, useMutation 메소드를 사용한다.
내가 이해한 바로는 서버의 데이터가 수정될 필요가 있을 때, mutation을 사용하는 것으로 알고 있다.

데이터 정규화

[RTK Query (Redux)]
createApi에서 데이터를 정규화하여 상태 관리를 최적화할 수 있도록 한다.

[React-Query]
데이터를 자동으로 정규화하지는 않지만, API의 요청 중복을 방지해주고 데이터 캐시를 통해 성능을 향상시킨다.

최적화

[RTK Query (Redux)]
상태 업데이트 및 캐싱을 최적화하는데 Redux 기능을 사용할 수 있다.

[React-Query]
요청 중복 방지, 데이터 캐싱, Refetch 등을 통해 최적화 되어 있다.

🤓 어떤 것을 선택할까?

RTK Query를 사용하고 싶어!

• 상태관리를 Redux로 하고 싶을 때!
• 이미 상태관리를 Redux로 하고 있고, 쿼리 기능을 통합시키고 싶을 때!
• 이미 Redux를 사용하고 있고, 이미 작성된 데이터 패칭 로직을 단순화시키고 싶을 때!
• Redux DevTools 사용해서 state history 변화를 보고 싶을 때!
• 애플리케이션 로직이 React 밖에서 동작해야 할 때!

React-Query를 사용하고 싶어!

• 단일 페이지 어플리케이션(SPA)에서 비동기 데이터 통신을 간단하게 처리하고 싶을 때!
• 요청 중복 방지, 데이터 캐싱, 자동 Refetching 등의 성능 최적화를 자동으로 처리하고 싶을 때!

🤓 비교 테이블

RTK Query와 React-Query을 비교하는 테이블이다.
참고해보면 좋을 것 같다.