• 유데미 강의 React Query / TanStack Query : React로 서버 상태 관리하기 강의를 참고하여 작성한 글입니다.
• Tanstack Query v5 버전을 기준으로 작성하였습니다.

소개

React Query

• 서버 상태를 관리하는 라이브러리
• 서버의 데이터를 효율적으로 가져오고, 캐시하고, 동기화하고, 업데이트하기 위한 라이브러리
• V4 부터는 Tanstack Query로 바뀜

Client State vs. Server State

Client State	Server State
사용자 인터페이스(UI)와 직접 관련된 상태. 예를 들어, 드롭다운이 열렸는지 여부, 현재 선택된 탭 등 사용자의 인터랙션에 의해 변경되는 상태를 포함한다.	서버에 저장되어 있는 데이터로, 클라이언트에서 서버로부터 가져오거나 서버에 보내는 정보. 예를 들어, 사용자 프로필, 게시물 목록 등 서버에 저장되어 있는 데이터를 포함한다.
클라이언트 측에서 관리. 상태 관리 라이브러리 (예: Redux, MobX, Context API)를 사용하여 관리될 수 있다.	서버 측에서 관리. 데이터베이스나 파일 시스템 등에 저장되어 관리된다.
주로 사용자의 인터랙션에 의해 변경되며, 클라이언트 내부에서 관리되고 업데이트된다.	클라이언트의 요청에 따라 서버에서 클라이언트로 데이터가 전송되며, 클라이언트에서 서버로 데이터가 업데이트되거나 요청될 수 있다.

---

Tanstack Query 특징

1. 상태

Fresh

• 데이터가 최근에 가져온 상태이며, 현재 최신 상태로 간주
• 데이터가 사용자에게 가장 관련성이 높고 최신 정보를 반영한다는 것을 의미
• 컴포넌트가 마운트, 업데이트되어도 데이터 재요청 하지 않는다.

Fetching

• 데이터가 현재 서버로부터 가져오는 중인 상태
• 요청이 시작되어 데이터가 아직 도착하지 않았을 때 발생

Paused

• 데이터 요청 또는 업데이트가 일시적으로 중지된 상태
• 네트워크 연결이 끊기거나 사용자가 데이터 새로 고침을 일시적으로 중지요청한 경우 등 다양한 이유로 발생
• 일시 정지 상태에서는 새로운 데이터 요청이 일시적으로 보류

Stale

• 데이터가 더 이상 최신 상태가 아닌 것으로 간주되는 상태
• 데이터가 특정 시간 동안 업데이트되지 않았거나, 특정 이벤트가 발생하여 데이터가 최신 상태가 아닐 가능성이 있음
• 컴포넌트가 마운트, 업데이트되면 데이터 재요청

Inactive

• 데이터가 현재 사용되지 않는 상태
• 컴포넌트가 언마운트되어 해당 데이터에 대한 구독이 더 이상 활성화되지 않은 경우
• 데이터가 비활성 상태가 되면, 캐시에서 제거되거나 캐시 유지 정책에 따라 처리될 수 있음

2. 캐싱

Tanstack Query에서의 캐싱은 데이터를 임시 저장하여 빠르게 재사용할 수 있게 해주는 기능

gcTime	// default: 5분
staleTime	// default: 0초
refetchOnMount	// default: true
refetchOnReconnect	// default: true
refetchOnWindowFocus	// default: true

gcTime

• v5 버전에서는 cacheTime에서 gcTime으로 이름 변경

• 성공적으로 가져온 데이터가 캐시에 남아있는 기간을 설정

• 기본 값은 5분 (300,000ms)

• 설정한 기간이 지나면 캐시된 데이터는 가비지 컬렉터에 의해 수집

  • 가비지 컬렉터 (GC) : 프로그램이 동적으로 할당한 메모리 중 더 이상 사용되지 않는 메모리 영역을 자동으로 식별하고 해제하는 기능

const MINUTE = 1000 * 60;

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
       gcTime: 10 * MINUTE, 
    },
  },
})

staleTime

• 캐시된 데이터가 stale (신선하지 않은) 상태로 간주되기까지의 시간

• 데이터가 Fresh 상태에서 Stale 상태로 변경되는데 걸리는 시간

• Fresh 상태일 경우 Refetch가 되어도 서버에서 가져오지 않고 캐싱된 값을 불러옴

• 기본 값은 0초로 데이터를 가져온 직후부터 데이터를 stale 상태로 간주

• staleTime은 개별 쿼리에 대해 설정하거나 전역 설정으로 적용할 수 있음

• 적절한 staleTime을 설정하여 서버 요청을 줄이고 성능을 최적화, 데이터가 자주 변경되지 않는 경우 staleTime을 늘려 불필요한 데이터 요청을 줄일 수 있음

// 전역 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
       staleTime: 1000, 
    },
  },
})

// 개별 쿼리 설정
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  staleTime: 1000,
})

refetchOnMount

• 컴포넌트가 마운트될 때, 데이터를 다시 가져올지 여부를 결정

• 기본 값은 true 로 컴포넌트가 마운트될 때마다 stale 상태일 경우 데이터를 다시 가져옴

• 설정 옵션

  • true : 컴포넌트가 마운트 시 stale 상태일 경우 마운트 시 마다 Refetch
  • false : 컴포넌트가 마운트 시 데이터를 다시 가져오지 X
  • always : 컴포넌트가 마운트 시 stale에 상관없이 항상 데이터를 Refetch

// 전역 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
       refetchOnMount: true | false | "always", 
    },
  },
})

// 개별 쿼리 설정
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  refetchOnMount: true | false | "always", 
})

개별 쿼리 설정이 전역 설정보다 우선 순위를 가지기 때문에 전역 설정에서 refetchOnMount가 false로 설정하여도 개별 쿼리에 대해서 true, always를 설정할 수 있다.

refetchOnReconnect

• 인터넷 연결이 다시 설정될 때 데이터를 자동으로 다시 가져올지 여부를 결정

• 사용자의 인터넷 연결이 끊어졌다가 다시 연결되었을 때, 최신 데이터를 자동으로 가져와서 데이터의 신선도를 유지하고 사용자에게 최신 정보를 제공

• 기본 값은 true 로 인터넷 연결이 다시 됐을 때, stale 상태일 경우 데이터를 다시 가져옴

• 설정 옵션

  • true : 인터넷 연결이 다시 설정될 때마다 stale 상태일 경우 Refetch
  • false : 인터넷 연결이 다시 설정되어도 데이터를 자동으로 다시 가져오지 X

// 전역 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
       refetchOnReconnect: true | false, 
    },
  },
})

// 개별 쿼리 설정
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  refetchOnReconnect: true | false, 
})

개별 쿼리 설정이 전역 설정보다 우선 순위를 가지기 때문에 전역 설정에서 refetchOnReconnect가 false로 설정하여도 개별 쿼리에 대해서 true를 설정할 수 있다.

refetchOnWindowFocus

• 사용자가 브라우저 창이나 탭에 다시 돌아왔을 때, 데이터를 자동으로 다시 가져올지 여부를 결정

• 기본 값은 true 로 사용자가 브라우저 창이나 탭에 다시 돌아왔을 때, stale 상태일 경우 데이터를 다시 가져옴

• 설정 옵션

  • true : 창이나 탭에 다시 돌아올 때마다 stale 상태일 경우 Refetch
  • false : 창이나 탭에 다시 돌아올 때마다 데이터를 자동으로 다시 가져오지 X

// 전역 설정
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
       refetchOnWindowFocus: true | false, 
    },
  },
})

// 개별 쿼리 설정
const result = useQuery({
  queryKey: ['todos'],
  queryFn: () => fetch('/todos'),
  initialData: initialTodos,
  refetchOnWindowFocus: true | false, 
})

개별 쿼리 설정이 전역 설정보다 우선 순위를 가지기 때문에 전역 설정에서 refetchOnWindowFocus가 false로 설정하여도 개별 쿼리에 대해서 true를 설정할 수 있다.