react-query vs rtk-query

백엔드 서버와의 통신은 웹 프론트엔드 개발에 있어서 핵심적인 부분입니다.

프로젝트마다 어떻게 하면 효율적인 방식으로 서버 데이터를 처리 할 수 있을지 고민하며 여러 도구들을 찾아보았습니다.
제가 사용해본 서버 데이터 상태관리 라이브러리는 react-query와 rtk-query인데요.

react-query와 rtk-query는 모두 서버의 데이터를 받아와 효율적으로 캐싱하는 것이 주요한 기능입니다.

🐶 라이브러리를 사용하게 된 이유

1. 서버와의 통신 과정에서 로딩 상태, 에러 여부 등을 컴포넌트 내부에서 직접 상태를 작성하여 관리하지 않아도 됩니다.
2. 자동 데이터 캐싱을 통해 서버의 부담을 줄일 수 있습니다.
3. 일정 시간이 지나거나, 데이터 변동이 생겼을 때 자동으로 캐시된 데이터를 제거하고 다시 받아와 최신의 데이터를 보여줄 수 있습니다.

🐶 rtk-query

제가 서버 데이터 상태관리 라이브러리 중에 처음으로 선택하게 된 라이브러리는 rtk-query였습니다.

• 선택한 이유
  - 프로젝트에서 사용 중인 redux toolkit의 연장선
  - redux devtools를 이용해서 상태의 히스토리 변화를 확인하는게 가능합니다.
  - 하나의 모듈을 중심으로 createApi를 통해 관련 코드들(CRUD)을 모두 작성할 수 있어 코드의 작성과 유지보수가 편리할 것으로 생각했습니다.
• 단점
  - react-query와 비교했을 때 참고할 자료가 적고, 기능이 부족합니다.
  • react-query로는 무한 스크롤을 간단하게 처리가능한 기능이 존재합니다. 실제로 사용해봤는데 좋더라구요.

🐶 react-query

두번째 프로젝트에서는 react-query를 사용하게 되었습니다.

• 선택한 이유
  - react-query도 react query devtools를 통해 캐시된 데이터와 쿼리 상태를 관찰할 수 있습니다.
  - 프로젝트 내에서 무한스크롤을 처리해야했는데 useInfiniteQuery를 통해 무한스크롤을 처리할 수 있었습니다. 이를 통해 복잡한 스크롤 관리 로직을 직접 구현하는 데 들어가는 시간과 노력을 줄일 수 있을 거라고 생각했습니다.

🐶 정리

• react-query : 라이브러리에서 기본적으로 제공하는 기능들이 더욱 강력하다.
• rtk-query : 코드 작성의 깔끔함이나 유지보수에 용이하다.