[6주차 이론 study] SWR

[xeunnie]

SWR

키워드

• 캐싱 전략: revalidateOnFocus, revalidateOnReconnect, dedupingInterval, cache provider
• 옵티미스틱 업데이트: mutate(key, newData, optimisticData, rollback)
• 쿼리 무효화: mutate, revalidate
• 병렬 요청: useSWR 여러 개 사용, Promise.all
• 의존성 쿼리: useSWR(key, fetcher, { suspense }), 의존성 기반 key 동적 설정
• 데이터 페칭 최적화: fallbackData, keepPreviousData, refreshInterval

SWR 핵심 개념

• useSWR, mutate
• key (queryKey 역할), fetcher (queryFn 역할)
• dedupingInterval vs revalidateOnFocus
• refreshInterval, revalidateOnReconnect
• mutate를 활용한 데이터 업데이트
• isValidating, error, data, isLoading
• 옵티미스틱 업데이트와 롤백 처리
• onSuccess, onError (SWR의 에러 처리 패턴)
• useSWRInfinite (무한 스크롤 및 페이지네이션)
• Garbage Collection (캐시 관리 방식)
• Hydration (SSR & SWR)

면접 대비 SWR 심화 개념

• SWR vs React Query (주요 차이점과 사용 시점)
• SWR의 내부 동작 방식 (Key 기반 캐싱, Fetcher, Focus Revalidation 원리)
• SWR의 Garbage Collection & 메모리 관리 원리
• SWR과 React Query 비교 (데이터 동기화 방식 차이, 자동 갱신 차이)
• SWR에서 SSR & Hydration 적용 방식
• SWR에서 Query Key 설계 Best Practice
• SWR에서 API 요청 최적화 패턴 (Debounce, Prefetching)