react-query 정리

1. 서버상태

1. 클라이언트 사이드 상태 (Client-Side State)

• 사용자의 브라우저 내에서 관리되는 상태 (리액트 컴포넌트의 useState 또는 상태관리라이브러리 ex)Redux,MobX,Recoil 를 통해 관리)
• 주로 UI 컴포넌트의 상태, 사용자 입력, 토글 상태와 같이 로컬에서만 필요한 데이터를 관리
• 네트워크 지연없이 빠르게 상태를 변경하고 반응할 수 있음
• 페이지를 새로고침하거나 애플리케이션을 종료할 때 초기화되는 경향

2. 서버 사이드 상태 (Server-Side State)

• 서버에 저장되고 관리되는 데이터 (데이터베이스, 파일 시스템, 서버의 메모리)
• 사용자 정보, 애플리케이션 설정, 대규모 데이터셋 등 여러 세션 또는 사용자 간에 공유되어야 하는 데이터 관리
• 클라이언트의 상태가 초기화되거나 변경되어도 영구적으로 유지
• 클라이언트에서 서버로 데이터를 요청하거나 업데이트하면서 발생하는 네트워크 지연과 데이터 동기화에 대한 고려가 필요

2. react-query란?

• 서버 상태(서버에 요청하고 응답받는 모든 과정과 연관된 데이터)관리를 쉽게 하도록 도와주는 라이브러리
• 서버 상태관리를 쉽게 한다는 것은? 다음 4가지를 쉽게 해준다는 것!!
  => fetching: 서버에서 데이터 받아오기
  => caching: 서버에서 받아온 데이터를 따로 보관해서 동일한 데이터가 단 시간 내에 다시 필요할 시 서버요청없이 보관된 데이터에서 꺼내쓰기
  => synchronizing: 서버상의 데이터와 보관중인 캐시 데이터(서버상태)를 동일하게 만들기(동기화)
  => updating: 서버 데이터 변경 용이 (mutation & invalidateQueries)

3. 주요개념

1. fresh

• 데이터가 최신상태를 의미
• staleTime이 아직 경과되지 않음
• 추가적인 데이터 요청이 발생해도 리액트쿼리가 데이터를 재요청하지 않고 현재 캐시된 값을 사용

2. stale

• 데이터가 더이상 최신상태가 아님, 재검증(revalidation)이 필요할 수 있는 상태
• staleTime이 경과하면 데이터는 자동으로 stale상태가 됨
• 이 상태에서 쿼리가 다시 실행되면, 리액트 쿼리는 자동으로 백드라운드에서 데이터를 새로고침하여 최신 상태로 유지하려고 시도 => query key

3. staleTime

• 특정 쿼리에 대한 데이터가 'fresh'상태로 유지되는 시간을 정의
• 이 시간 동안은 데이터를 다시 가져오지(fetch) 않음

=> fetching을 해서 가져온 직후의 데이터는 늘 'fresh', staleTime이 0이면 가져온 데이터는 즉시 stale

4. inActive

• 특정 쿼리에 대한 모든 옵저버(observer)가 제거되었을 때
• 해당 데이터를 사용하는 컴포넌트가 더이상 마운트되지 않거나 해당 쿼리를 구독하는 컴포넌트가 없을 때
• 이 상태에서는 데이터가 캐시에서 자동으로 삭제되기 전까지 일정기간동안 유지
• inActive에서 fresh가 다시 될 수 있는가? YES!!
  => 컴포넌트 재마운트 : 이전에 사용되었던 쿼리 키를 가진 컴포넌트가 다시 마운트되면, 해당 쿼리는 다시 활성화 됨. 이 때, staleTime이 아직 지나지 않았다면 데이터는 여전히 fresh
  => 데이터재요청, Refetch

5. isLoading, isFetching

• isLoading은 쿼리가 초기 로딩 상태에 있을 때 true, 쿼리가 처음 실행되어 데이터를 요청하고 있는 상태
• isFetching은 쿼리가 데이터를 요청하고 있는 어떠한 시점에도 true, 초기 로딩뿐만 아니라 백드라운드 업데이트나 리프레시 시에도 해당됨

=> 이를 적절히 활용하면 사용자에게 더 나은 피드백과 사용자 경험을 제공할 수 있음

4. 라이프사이클 및 주요 옵션

<주요옵션(기본설정과 의미)>

(1) staleTime : 0

• useQuery 또는 useInfiniteQuery에 등록된 queryFn을 통해 fetch 받아온 데이터는 항상 stale data 취급

(2) refetchOnMount : true

• useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 마운트 시 stale data를 refetch 자동 실행

(3) refetchOnWindowFocus : true

• 실행중인 브라우저 화면을 focus 할 때 마다 stale data를 refetch 자동 실행

(4) refetchOnReconnect : true

• Network가 끊겼다가 재연결 되었을 때 stale data를 refetch 자동 실행

(5) cacheTime : 5분 (1000 60 5 ms)

• useQuery 또는 useInfiniteQuery가 있는 컴포넌트가 언마운트 되었을 때 inactive query라 부르며, inactive 상태가 5분 경과 후 GC(가비지콜렉터)에 의해 cache data 삭제 처리

(6) retry : 3

• useQuery 또는 useInfiniteQuery에 등록된 queryFn이 API 서버에 요청을 보내서 실패하더라도 바로 에러를 띄우지 않고 총 3번까지 재요청을 자동으로 시도

<revalidate vs invalidateQueries>
=> 데이터의 stale함, fresh함과 관련된 두가지 다른 개념!

(1) revalidate(재검증)

• 캐시된 데이터가 stale(오래된)상태가 되었을 때, 이를 자동으로 감지하고 새로운 데이터를 가져오는 프로세스
• React Query는 staleTime이 지나거나 다른 특정 이벤트(ex. 브라우저 창 포커스 획득)가 발생했을 때 데이터를 재검증
• 일반적으로 백그라운드에서 이루어지며, 사용자는 데이터가 최신 상태로 유지되고 있음을 자동으로 알 수 있음

(2) invaludateQueries(Query무효화)

• 특정 쿼리 또는 쿼리 그룹을 명시적으로 stale상태도 만듦. 이는 React Query에게 해당 쿼리의 데이터가 더이상 유효하지 않으며, 가능한 빨리 재검증해야 한다는 것을 알림
• 사용자가 데이터를 수정하는 작업을 수행한 후, 관련 쿼리를 invalidate함으로써 최신 데이터로의 자동 업데이트를 트리거할 수 있음

Tanstack Query (v4부터 라이브러리명이 바뀜)

// "react-query": "^3.39.3"
yarn add react-query

// "@tanstack/react-query": "^4.29.19"
yarn add @tanstack/react-query

❗❗ v4부터는 query key를 반드시 배열형태로 써줘야함!!!

useQuery("todos", getTodos); ❌ 에러 발생

useQuery(["todos"], getTodos); ✅ 정상 동작