요즘 Redux 대신 React-Query(tanstack-query)가 대세인 이유

요즘 프로젝트에 무한스크롤을 구현하던 중이다. 이 프로젝트는 블로그 형식에 현재 상태관리로는 zustand를 사용하고 있으며 실제 출시(?)를 염두에 두고 있다. 그래서 나중에 트래픽이 많아질 것을 염려해 무한스크롤에 라이브러리를 쓰지않고 직접 구현하려고 시도했다. 하지만 실패했고, react-query를 궁금하던 찰라에 react-query의 InfiniteQuery를 무한스크롤에 많이 사용하기에 한번 조사해보았다.

 

 

도데체 왜 요즘에 react-query라는 말이 자주, 그리고 당연하게 들릴까?

 

1. redux는 컴포넌트간에 데이터를 공유하는 것이다.

 - 캐싱이 안됨

2. react-query는 서버 데이터를 가져오는 것이다. 

 1) 캐싱을 잘 해준다. -> 트래픽관리 -> 비용 감소

  - 캐싱을 해놓고 수정하는 액션을 한 경우에만 해당 게시물을 찾아서 그것만 수정

 2) 인터페이스를 표준화

  - 데이터 패칭시, 로딩, 성공, 실패를 표준어로 활용할 수 0 
  - 그냥 가져다 쓰면 됨

 3) key 구조에 따라서 데이터가 각각 저장 됨 + 각종 편리한 기능 

 4) + zustand랑 같이 사용하기 좋다.
  - 컴포넌트간의 데이터 공유용

  - redux의 가벼운 버전

  - 즉, 같이 써도 된다. 

 

제로초님의 강의를 들어보니 강사님께서도 zustand와 react-query를 같이 쓰기를 추천하다고 하셨다. 

 

며칠간 공부를 좀 한 뒤에, next.js pages router + tanstack-query v.5 적용한 무한스크롤 과정을 포스팅하려고 한다.