React -Query

기존 미들웨어의 한계

 

- 보일러플레이트 : 코드량이 너무 많다.

- 규격화 문제 : redux는 비동기 데이터 관리를 위한 전문 라이브러리가 아니다. 

 

쿼리의 강점

- 쉽고 책임에서 자유롭다

- 직관적이다

 

라이프 사이클

fresh 상태

 

'Fresh' 상태는 데이터가 최신 상태임을 의미한다

즉, 최근에 가져온(fetch) 데이터이며 staleTime이 아직 경과하지 않았고 fresh상태에서는 추가적인 데이터 요청이 발생해도 리액트 쿼리가 데이터를 재요청하지 않고 현재 캐시된 값을 사용한다

 

stale 상태

 

'Stale' 상태는 데이터가 더 이상 최신 상태가 아니며 재검증(revalidation)이 필요할 수 있는 상태를 의미한다.

staletime이 오버 된 경우

 

inActive  상태

• 특정 쿼리에 대한 모든 옵저버(observer)가 제거되었을 때 발생
• 해당 데이터를 사용하는 컴포넌트가 더 이상 마운트되지 않거나 해당 쿼리를 구독하는 컴포넌트가 없을 때
• 이 상태에서는 데이터가 캐시에서 자동으로 삭제되기 전까지 일정 기간 동안 유지

-> inActive에서 다시 fresh가 될 수 있음을 알기

 

isLoading vs isFetching

isLoading은 데이터가 처음 로드될 때만 true가 됨

isFetching은 데이터가 처음 로드될 때뿐만 아니라 데이터가 업데이트되거나 재요청될 때도 true가 됨

 

주요옵션

 

 

의도성에 따른 재검증

revalidate 

• 캐시된 데이터가 'stale'(오래된) 상태가 되었을 때,
  이를 자동으로 감지하고 새로운 데이터를 가져오는 프로세스
• 일반적으로 백그라운드에서 이루어지며, 사용자는 데이터가 최신 상태로 유지되고 있음을 자동으로 알 수 있다.

invalidateQueries

• 특정 쿼리 또는 쿼리 그룹을 명시적으로 'stale' 상태로 만듬
• 사용자가 데이터를 수정하는 작업을 수행한 후, 관련 쿼리를 'invalidate'함으로써 최신 데이터로의 자동 업데이트를 트리거