[React-Query v3] 리액트 쿼리(React-Query) 간단 정리

React-Query란 ?

React에서 비동기에서의 상태 관리 작업을 쉽고 효과적으로 할 수 있게 해준다.

서버의 상태 관리를 react에서 할 수 있는 서버상태 관리 라이브러리 이다.

 

React-Query의 기능

캐싱

• 리액트 쿼리는 클라이언트에서 서버 데이터 캐시를 관리한다.
• 서버 데이터가 필요할 때, 백엔드로 비동기 요청을 하지 않고 쿼리에 캐시를 요청하여 빠르게 데이터 값을 가져올 수 있다. (Pagination 이나 Infinite scrolling 등 지연 로딩이 걸리는 부분에서 빠른 렌더링 가능)
  
  

 

 

프리패칭 (Prefetching)

• Pagination 이나 Infinite scrolling 등 지연 로딩이 걸리는 기능에서 필요한 데이터를 미리 가져와 빠른 렌더를 할 수 있다.

 

동일한 데이터를 요청하는 경우 한번만 요청한다.

• 로드된 페이지의 여러 구성요소가 동일한 데이터를 요청하는 경우 리액트 쿼리가 중복 요청을 제거하여 한번만 요청한다.

 

오래된 데이터 파악 및 업데이트

• staleTime 을 설정하여 오래된 데이터는 리액트 쿼리가 새로운 데이터로 업데이트 해준다.

 

요청의 성공과 오류를 구별하여 콜백을 전달할 수 있다.

 

---

이제 React-Query [ 실습 ] 에서 리액트 쿼리를 사용하는 방법을 알아보자.