[React Query] React Query 개념 및 장점

 

React Query 개념 및 장점

React Query는 React 앱의 서버 상태를 관리하는 라이브러리이다.

 

그렇다면 서버 상태와 클라이언트 상태의 차이점을 알아야한다.

클라이언트 상태란 웹 브라우저 세션과 관련된 모든 정보로 예를 들어 테마를 밝은색이나 어두운색 배경으로 변경하는 경우인데 이것은 서버에서 일어나는 일과는 아무 관련이 없고 단순히 사용자의 상태를 추적한다.

반면 서버 상태는 서버에 저장되면서 클라이언트에 표시하는 데 필요한 데이터이다.

예를 들어 데이터베이스에 저장하는 블로그 게시물 데이터가 해당된다.

 

React Query는 클라이언트에서 서버 데이터 캐시를 관리한다.

서버 데이터가 필요할 때 Fetch나 Axios를 사용해 서버로 바로 요청하지 않고 React Query 캐시를 요청한다.

React Query의 역할은 React Query 클라이언트를 어떻게 구성했느냐에 따라 해당 캐시의 데이터를 유지 관리하는 것이다.

데이터를 관리하는 것은 React Query이지만 서버의 새 데이터로 캐시를 업데이트하는 시기를 설정하는 것은 사용자가 결정할 수 있다.

 

React Query에는 데이터 관리뿐만 아니라 서버 상태 관리에 도움이 되는 많은 도구가 함께 제공된다.

react query의 장점은 다음과 같다.

react query의 장점

Loading / Error state

서버에 대한 모든 쿼리의 로딩 및 오류 상태를 유지해주기 때문에 수동으로 할 필요가 없다.

Pagination / infinite scroll

데이터의 pagination 또는 무한 스크롤이 필요한 경우 데이터를 조각으로 가져올 수 있다.

Prefetching

데이터를 미리 가져와서 캐시에 넣으면 사용자에게 데이터가 필요할 때 캐시에서 해당 데이터를 가져오기 때문에 사용자는 서버에 연결할 때까지 기다릴 필요가 없다.

Mutations

React Query가 서버에서 데이터의 변이나 업데이트를 관리할 수 있다.

Deduplication

 

쿼리는 키로 식별되기 때문에 React Query는 요청을 관리할 수 있고 페이지를 로드하고 해당 페이지의 여러 구성 요소가

동일한 데이터를 요청하는 경우  중복 요청을 제거할 수 있다.

Retry on error

또한 서버에서 오류가 발생하는 경우에 대한 재시도를 관리할 수 있다.

Callbacks

쿼리가 성공하거나 오류가 났을 때를 구별해서 조치를 취할 수 있도록 콜백을 전달할 수 있다.