개요

데이터 fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어주는 리액트 라이브러리이다. 기존의 상태관리 라이브러리들(redux나 redux-saga 등)은 클라이언트 쪽의 데이터를 관리하기에는 좋았지만, 서버 쪽의 데이터를 관리하기에는 좋지 않았다. 예를 들어 사용자 정보인 닉네임을 변경하였을 때 다른 사람들도 해당 사용자의 변경된 닉네임을 바로 확인할 수 있어야 하는 상황이 있다고 해 보자. 이 때는 클라이언트 쪽에서 이 데이터를 관리하는 것 보다 서버 쪽에서 해당 유저의 데이터를 관리할 수 있어야 한다.

이 말고도 데이터를 캐싱하거나 get을 한 데이터가 업데이트되면 다시 get을 자동으로 요청하는 등 개발자가 구현하기 복잡한 로직들을 알아서 해 준다는 장점을 가지고 있다.

개념

important defaults

• useQuery와 useInfiniteQuery로 받은 데이터는 애초부터 캐시 stale되었다 가정한다.
  • staleTime 옵션을 조절해서 캐시 기간을 정할 수 있다.
• Stale된 캐시는 다음과 같은 상황에서 백그라운드에서 재요청된다.
  • 새 query 인스턴스가 마운트될 때
  • 윈도우 창이 다시 포커스되었을 때
  • 네트워크가 다시 연결되었을 때
  • refetch interval로 처리했을 때
• useQuery, useInfiniteQuery, query observer로 인해 가져온 쿼리 결과들은 사용되지 않는 경우 inactive 처리된다. 기본적으로 5분이 지나면 가비지 컬렉팅된다. gcTime으로 변경할 수 있다.
• 실패한 쿼리는 지수 백오프 방식을 통해서 3번 재요청되다가 그 후에 에러로 표시된다.

캐시와 stale, gcTime

캐시는 말 그대로 데이터가 메모리에 저장되었는지의 여부이다

• queryKey를 기반으로 데이터를 캐싱
• 캐시된 데이터를 요청하면 캐시에서 바로 데이터를 가져옴
• 캐시되지 않은 데이터를 요청하면 API 요청을 통해 데이터를 가져오고, 그 데이터를 캐싱

staleTime