아주 짧게 정리한 React Query 캐싱 상태

React Devtools를 사용하다 갑작스럽게 상태에 대한 혼란이 왔다.

정리하고자 복습하는 차원에서 다시 한번 짤막하게 정리해본다.

리액트 쿼리의 State와 Actions

State

• Fresh
  리액트 쿼리의 모든 데이터들은 기본적으로 fresh가 아니다. (기간 체크 가능)
• Stale
  기회가 되면 항상 데이터를 패칭한다. 여기서 말하는 기회에는 아래와 같은 목록들이 있다.
  - refetchOnWIndowFoucs : 윈도우 탭 포커스가 다시 되었을 때
  - retryOnMount: 컴포넌트 마운트 되었을 때
  - refetchOnReconnect: 인터넷 연결이 끊겼다가 다시 접속이 되었을 때,
  - retry: 데이터를 가져올 때 실패하면 몇번정도 가져오는지 활성화

  이 상태를 Provider에서 설정해줄 수 있으며, 특정 기능이 필요하면 useQuery에서 오버라이드가 가능하다.

Actions

• refetch
  모든 데이터를 무조건 새로 가져온다.
• inValidate
  Observer를 감지하다가, Observer가 1이 될 경우 데이터를 가져온다.
  즉, 현재 화면에서 데이터를 사용하고 있을 때만 다시 데이터를 가져온다.
  - Oberserver란?
  리액트 쿼리 데브툴에서 지금 현재 페이지에서 key값으로 들어있는 데이터를 사용하고 있는지 감지.
  데이터를 사용 중 이면 1, 미사용 중이면 0으로 표시된다.
• Reset
  초기 데이터를 호출해준다.
  useQuery에 initalData가 있을 땐 이를 불러주고, 없을 때는 데이터를 새롭게 가져온다.
• Trigger Loading
  로딩 상태를 노출 시켜준다
• Trigger Error
  에러 상태를 노출 시켜준다

💡 refetch와 inValidate의 차이
refetch는 무조건 가져오지만, inValidate는 inActive 상태일 때는 가져오지 않는다.
(화면 상의 노출 유무로 생각하자. inValidate는 화면 상의 데이터가 없으면 호출 X)

하지만 무조건적으로 inValidate가 좋은건 아니다.
예를 들어, 화면에 안 보인다고 해서 그 데이터가 안 필요한게 아니다.
다른 컴포넌트에서 전역적으로 공유하는 데이터들은 화면에 보이지 않아도 필요할 수 있다.
이런 케이스에서는 refetch를 사용하자.

데이터 패칭할 때 필요없는 데이터(예를 들어 게시글 - 댓글)는 enabled 해서 추가 호출을 막자

기존의 useSearchParams는 Readonly 이기 때문에 제거 하는 방법이 없다.
이럴 때에는 new URLSearchParams(함수) 방식으로 변형할 수 있다.

---