React Query

react-query

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

• 사용자의 브라우저 내에서 관리되는 상태
• 주로 UI 컴포넌트의 상태 및 사용자 입력과 같은 로컬 데이터 관리에 사용됨.

클라이언트 사이드 상태의 특징

• 로컬 데이터: 주로 UI 컴포넌트의 상태, 사용자 입력 등을 관리
• 성능: 빠르게 상태 변경과 반응 가능
• 수명 주기: 페이지 새로고침이나 애플리케이션 종료 시 초기화
• 예시: 사용자가 입력한 폼 데이터, UI 컴포넌트 상태 등

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

• 서버에 저장되고 관리되는 데이터
• 데이터베이스, 파일 시스템, 서버 메모리 등에 저장 가능

서버 사이드 상태의 특징

• 중앙 집중식 데이터: 사용자 정보, 애플리케이션 설정, 대규모 데이터셋 등 관리
• 지속성: 서버에 저장되므로 클라이언트 상태 초기화에 영향 없음
• 동기화와 일관성: 클라이언트-서버 간 데이터 요청 및 업데이트에 대한 고려 필요
• 예시: 사용자 계정 정보, 애플리케이션의 공유 설정, 대규모 데이터셋 등

Stale 및 StaleTime (feat. CacheTime)

• Fresh: 최신 데이터 상태. StaleTime이 아직 경과하지 않은 상태로, 재요청이 필요하지 않음
• Stale: 데이터가 오래되어 재검증이 필요한 상태. 자동으로 백그라운드에서 재검증을 시도
• StaleTime: 특정 쿼리에 대한 데이터가 Fresh 상태로 유지되는 시간을 정의. 동안 재요청이 없음
• InActive: 모든 옵저버가 제거된 상태. 데이터는 일정 기간 유지 후 자동 삭제됨

isLoading과 isFetching

• isLoading: 쿼리가 초기 로딩 상태일 때 'true'. 최초 데이터 요청 중인 상태를 나타냄
• isFetching: 쿼리가 데이터를 요청 중인 어떤 시점에서도 'true'. 백그라운드 업데이트 및 리프레시 시에도 해당됨

라이프사이클 및 주요 옵션

• 라이프사이클: 쿼리의 생명주기를 나타내는 다이어그램을 통해 fetch, success, error 등의 상태를 시각화
• 주요 옵션: 'staleTime', 'refetchOnMount', 'refetchOnWindowFocus', 'refetchOnReconnect', 'cacheTime', 'retry' 등

Revalidate vs InvalidateQueries

• Revalidate: 캐시된 데이터가 Stale 상태가 되었을 때 자동으로 새로운 데이터를 가져오는 프로세스. 백그라운드에서 자동으로 수행
• InvalidateQueries: 특정 쿼리나 쿼리 그룹을 명시적으로 Stale 상태로 만듦. 최신 데이터로의 자동 업데이트를 트리거함

오늘의 한줄평 : 리액트 쿼리에 대해 좀더 자세히 알수 있는 좋은 시간이였다.