React Query
데이터 패칭, 캐싱, 동기화, 상태 관리를 효율적으로 처리하기 위한 라이브러리로, 특히 서버 상태 관리에 초점을 둔다.
장점
- 컴포넌트가 마운트될 때 자동으로 데이터를 패칭하고, 특정 조건에서 자동으로 리패칭을 하여 최신 데이터를 가져올 수 있다.
- 데이터를 캐싱하여 같은 쿼리 키를 사용하는 모든 컴포넌트가 이 캐시된 데이터를 공유하고, 중복으로 패칭이 일어나지 않도록 한다.
- 애플리케이션이 백그라운드에 있을 때도 주기적으로 동기화하여 최신 데이터를 유지할 수 있다.
- 로딩, 에러 등의 핸들링이 간편하다.
- 무한 스크롤 구현 시에 유용하다.
주요 개념
📝 서버 상태 (server state)
공식 문서에 따르면, 주로 서버나 외부 API에서 저장되고 관리되는 데이터로, 쉽게 생각하면 비동기 통신으로 조회하거나 업데이트하는 데이터를 의미한다.
리액트 쿼리는 서버 상태에 대한 캐싱이나 최신 데이터를 반영하는 문제, 같은 데이터를 중복으로 요청하는 문제 등을 해결해준다.
📝 Stale & Cache
Stale
'신선하지 않은', 오래된 데이터를 의미한다. 데이터가 처음 캐시되면 일정 시간 동안은 fresh 상태가 되며, 이 시간이 지나면 해당 데이터는 stale 상태가 된다. 즉, 데이터를 리패칭해야할 가능성이 있음을 나타낸다.
staleTime: 데이터가 fresh 상태로 유지되는 시간을 지정할 수 있다. 기본값은 0초.
❓ 언제 리패치가 일어날까?
- 쿼리의 새로운 인스턴스가 마운트될 때 :
refetchOnMount- 윈도우가 다시 포커스될 때 :
refetchOnWindowFocus- 네트워크가 재연결될 때 :
refetchOnReconnect- refectch interval을 설정했을 때 :
refetchInterval
Cache
패칭된 데이터를 임시로 저장하여 일정 시간동안 재사용할 수 있도록 하는 매커니즘이다.
cachedTime : 얼마의 시간동안 캐시에 남아있을지 설정할 수 있다. 해당 시간동안 무조건 리패칭이 일어나지 않는 것이 아니라, 특정 조건에서 캐시를 무효화하고 최신 데이터를 패칭할 수 있다. 기본값은 5분.
❓언제 사용할 수 있을까? (구체적인 예시)
- 페이지를 이동했다가 다시 이전 페이지로 돌아오는 경우 (ex. 피드 -> 상세 페이지 -> 피드)
- 여러 페이지에서 동일한 정보가 필요한 경우 (ex.사용자 프로필 정보)
.. 기타 등등
📝 최신 데이터에 대한 판단
리액트 쿼리는 staleTime을 기준으로 데이터의 신선도를 판단한다. staleTime이 지나면 이 데이터는 stale로 간주한다. 데이터가 stale 상태가 되면 앞서 말했던 윈도우 포커스나 컴포넌트 재마운트 등 특정 조건이 되면 리패칭이 일어난다.
이때, 최신 상태인가 아닌가를 판단하는 것은 stale 상태와 관련이 있는 것이지, 그 데이터의 내용 자체와는 직접적인 관련이 없다. 실제 데이터의 내용 변화를 확인하는 것이 아니라 staleTime과 데이터 리패칭에 기반한 것이라는 점을 기억하자.
