React-Query ?! 그게 뭔데?

요즘 기술 스택들을 보면 React-query를 쓰는 걸 참 많이 보는 것 같다.

그래서 React-Query가 뭔지 봤더니 

Server Data 와의 동기화, 캐싱, 업데이트 등을 쉽게 다룰 수 있는 라이브러리이다.

먼저 왜 쓰는지 부터 알아보자.

 

● 캐싱 Caching 

반복적인 데이터 호출을 방지하고, 불필요한 API콜을 하지 않아 준어 어플리케이션 속도에 긍정적이다.

 

● 서버 데이터 ↔ 클라이언트 데이터 분리

프로젝트의 규모에 따라 다르겠지만 어느정도 규모가 생기다보면 무자게 많은 데이터,상태 관리를 해야 하는데

서버에서 받아서 사용하는 data와 ui 관리하는 data 등 많은 데이터가 실제로 동시에 관리되고 혼잡스러워진다.

사실 이부분이 나에게 있어 가장 react-query를 사용해보고 싶다는 의지를 불러준 부분이다.

● 데이터의 Refresh

위의 캐싱과 비슷한느낌으로 여러가지 옵션을 통해 데이터의 최신화를 유지할 수 있다.

refetchOnwindowFocus, refetchOnMount, refetchOnReconnect

● ReackHooks 와의 조화?

react-query는 react hooks와의 비슷한 인터페이스에 거부감이 없다.

 

 

NPM TRENDS

현재 NPM trends에서 react-query와 swr을 보시면 거의 비슷한 수요를 가지고 있는걸 볼 수 있습니다.

인기있는 react-query. 다음편에선 사용법에 대해서 공부해보겠습니다.