[4~5주차 이론 study] React Query

[xeunnie]

React Query

키워드

• 캐싱 전략: staleTime, cacheTime, queryClient.prefetchQuery
• 옵티미스틱 업데이트: useMutation, onMutate, rollback
• 쿼리 무효화: invalidateQueries, refetchQueries, removeQueries
• 병렬 요청: useQueries, Promise.all
• 의존성 쿼리: enabled, queryKey 동적 설정
• 데이터 페칭 최적화: placeholderData, initialData, select

React Query 핵심 개념

• useQuery, useMutation
• queryKey, queryFn
• staleTime vs cacheTime
• refetchInterval, refetchOnWindowFocus
• invalidateQueries, refetchQueries
• isLoading, isFetching, isSuccess, isError
• optimistic updates (옵티미스틱 업데이트)
• onSuccess, onError, onSettled
• queryClient & setQueryData
• enabled 옵션
• useQueries, useInfiniteQuery
• Garbage Collection (가비지 컬렉션)
• Hydration (SSR & React Query)

면접 대비 React Query 심화 개념

• React Query vs Redux (글로벌 상태 vs 서버 상태 관리)
• React Query의 내부 동작 방식 (Observer, Query Cache)
• React Query의 Garbage Collection & 메모리 관리 원리
• React Query와 SWR 비교 (데이터 동기화 방식 차이)
• React Query에서 SSR & Hydration 적용 방식
• React Query의 Query Key 설계 Best Practice
• React Query에서 API 요청 최적화 패턴 (Debounce, Prefetching)
• React Query에서 WebSocket과 함께 사용하기

[xeunnie]

1. React Query와 SWR의 차이점은?

• 내부 캐싱 전략, 데이터 갱신 방식의 차이 설명
• 사용 사례에 따른 장단점 분석

2. React Query에서 staleTime과 cacheTime은 각각 어떤 역할을 하는가?

• 언제 데이터를 다시 가져오는지
• 캐시 메모리 관리 방식

3. React Query의 useMutation과 useQuery의 차이점과 활용 방법은?

• useMutation의 내부 동작 방식
• 요청 실패 시 onError, onSettled를 어떻게 활용하는지

4. React Query의 옵티미스틱 업데이트를 구현할 때 고려해야 할 사항은?

• API 요청이 실패했을 때 롤백 전략
• 낙관적 UI 업데이트의 이점과 리스크

5. React Query에서 queryKey를 어떻게 설계하는 것이 좋은가?

• 캐싱을 효율적으로 활용하기 위한 Best Practice
• 동적 queryKey가 필요한 경우

6. React Query의 Garbage Collection(가비지 컬렉션)은 어떻게 동작하는가?

• cacheTime과의 관계
• 메모리 관리를 어떻게 하는지

7. React Query의 invalidateQueries와 refetchQueries의 차이점은?

• 각각 언제 사용하는 것이 적절한지
• 성능적으로 어떤 차이가 있는지

8. React Query에서 서버 상태 관리가 Redux 같은 글로벌 상태 관리 라이브러리보다 유리한 이유는?

• 서버 상태와 클라이언트 상태의 차이
• Redux 대신 React Query를 사용할 때의 장점

9. React Query에서 병렬 요청을 최적화하는 방법은?

• useQueries vs. Promise.all 차이
• 데이터를 빠르게 가져오기 위한 패턴

10. React Query의 SSR 지원 방식은 어떻게 동작하는가?

• Next.js에서 getServerSideProps와의 차이
• React Query를 SSR 환경에서 사용할 때 주의해야 할 점