state-management · high priority

TanStack Query (React Query) 완전 정복

서버 상태 관리의 표준 — 캐싱, 동기화, 낙관적 업데이트

intermediate 난이도4시간토스당근카카오네이버배민

시작 전

이해도

매우 낮음

학습 개요

탄생 배경

쉬운 설명

복잡한 개념을 실생활 비유로 설명합니다.

“스마트 냉장고”

React Query는 스마트 냉장고입니다. 식재료(서버 데이터)를 자동으로 재고 관리합니다. staleTime은 "유통기한 확인 전 기다리는 시간"이고, gcTime은 "유통기한 지난 재료를 버리기까지 기다리는 시간"입니다. 낙관적 업데이트는 주문한 재료가 배달 오기 전에 이미 요리를 시작하는 것입니다.

핵심 개념

서버 상태 vs 클라이언트 상태

서버 상태

서버에서 가져오는 비동기 데이터
여러 사용자/탭에서 공유
언제든 stale해질 수 있음
→ React Query로 관리

1// React Query
2const { data: posts } = useQuery({
3  queryKey: ['posts'],
4  queryFn: () => fetchPosts(),
5});

클라이언트 상태

브라우저에만 존재하는 UI 상태
로컬에서만 의미 있음
서버와 동기화 불필요
→ useState/Zustand로 관리

1// useState
2const [isModalOpen, setIsModalOpen] = useState(false);
3const [selectedTab, setSelectedTab] = useState('all');

실무 적용

어떤 상황에서 사용하는가

댓글 목록 CRUD — 목록 조회, 추가, 삭제, 낙관적 업데이트

어떻게 적용하는가

useQuery로 댓글 목록 조회. useMutation으로 추가/삭제. 삭제 시 낙관적 업데이트로 즉시 UI 반영 후 서버 확인. queryClient.invalidateQueries로 관련 쿼리 재검증. 에러 시 스냅샷으로 롤백.

흔한 실수와 안티패턴

QueryKey를 하드코딩 문자열로 사용하면 오타 발생 위험 — 팩토리 패턴 권장
staleTime: 0이 기본값 — 매번 서버 요청이 발생할 수 있음, 적절한 설정 필요
mutation 후 invalidateQueries를 안 하면 UI가 이전 데이터를 보여줌
useQuery 결과를 로컬 state에 복사하면 동기화 문제 발생

면접 질문

중급토스당근카카오네이버

답변 방향 힌트

캐싱, 중복 요청, 동기화, 보일러플레이트

반드시 언급할 키워드

자동 캐싱
백그라운드 업데이트
중복 요청 dedup
로딩/에러 상태 자동 관리

예상 꼬리 질문

낙관적 업데이트가 실패하면 어떻게 처리하나요?
React Query와 Zustand를 함께 쓸 때 어떻게 역할을 나누나요?

학습 자료

← HTTP 캐싱 전략 완전 이해

CSS 애니메이션 & 트랜지션 실무 →