개념
✅ React Query란?
서버 상태 (Server State) 를 관리하기 위한 라이브러리
서버 상태는 Client가 아닌 Server에서 컨트롤되기 때문에
데이터의 최신화, 동기화가 중요한 이슈로 떠오릅니다.
🖥 Server State
비동기 API로 Fetch & Update 되는 상태로, Client가 제어/소유하지 않습니다.
Stale (out of date) 될 위험이 존재합니다.
ex) Server에서 가져온 DB 데이터 등
🚦 Query의 상태
서버에서 가져온 데이터의 Life Cyle을 5가지로 나타냅니다.
| 아이콘 | 상태 | 설명 | 기본값 |
|---|---|---|---|
| 💬 | fetching | 서버에서 데이터를 가져오는 중입니다. | |
| ✅ | fresh | 최신 데이터가 방금 추가되었습니다. 새 쿼리 인스턴스가 active됩니다. | |
| 🕸 | stale | fetch한지 오래되어 데이터 갱신이 필요합니다. 서버 상태가 실제 저장된 것과 다를 수 있습니다. | fresh 후 0초 |
| 💤 | inactive | 컴포넌트가 언마운트되어 더이상 데이터를 참조하는 곳이 없습니다. | |
| ❌ | deleted | 가비지 컬렉터에 의해 오래된 inactive 데이터가 제거되었습니다. | inactive 후 5분 |
🚨 Query 요청 함수의 상태
서버에서 가져온 데이터의 Life Cycle을 5가지로 나타냅니다.
| 아이콘 | 상태 | 설명 |
|---|---|---|
| 🚧 | idle | 쿼리 비활성화 (캐시된 데이터 없음) |
| 🔁 | loading | 데이터를 가져오는 중 |
| ✅ | success | 쿼리 요청 성공 (캐시된 데이터 존재) |
| 🚨 | error | 쿼리 요청 실패 |
useQuery
기본 사용법
const query = useQuery(쿼리 키, 쿼리 함수, 옵션);✅ 쿼리 키
✅ 쿼리 함수
옵션
✅ staleTime : ✅ fresh → 🕸 stale 까지 걸리는 시간
✅ cacheTime : 💤 inactive → ❌ deleted 까지 걸리는 캐시 유지 시간
✅ enabled : 컴포넌트 마운트 또는 쿼리 키 변경 시 refetch
→ useQuery가 반환하는 refetch 메서드로 refetch 가능
✅ refetchInterval : 일정 시간마다 refetch
✅ refetchIntervalInBackground : 브라우저에 포커스가 없어도 일정 시간마다 refetch
✅ select : fetch 성공 시 전처리
✅ refetchOnMount : 컴포넌트 마운트 시 refetch
✅ refetchOnWindowFocus : 브라우저가 포커스되면 refetch
✅ refetchOnReconnect : 네트워크가 다시 연결되면 refetch
🔄 retry : 실패한 쿼리 재시도 옵션 설정 (기본 3회)
🔄 retryOnMount : 마운트 시 재시도 여부 설정
🔄 retryDelay : 재시도 간격 설정
→ 기본 1초 시작 후 시도할 때마다 2배씩, 최대 30초
⚡ onSuccess : fetch 성공 시 실행될 함수
⚡ onError : fetch 실패 시 실행될 함수
⚡ onSettled : fetch 성공/실패 모든 경우에 실행될 함수
💫 Server State를 둘러싼 주요 고민
-
얼마나 자주 최신화해야 할까? (Client가 갖고 있는 데이터가 아니므로 큰 비용 발생)
-
캐싱이 필요한 데이터일까?
4가지 기본 동작
가져오기, 캐싱, 동기화, 업데이트
✅ Checklist
1) State 캐싱
2) 동일 데이터에 대한 중복 요청 제거
3) out of date된 데이터 감지 & 업데이트
4) 업데이트된 데이터
5) 페이지네이션, lazy loading 최적화
6) Server State GC
7) 쿼리 Memoization
🤔 Mutate에서 Stale 쿼리가 리패칭되는 경우는?
◾ CUD Mutation 후 invalidate 실시
참고 자료
