Server State Management

1. Server State Management (서버 상태 관리)

가장 정확한 표현입니다. 클라이언트 상태(useState)와 서버 상태를 분리합니다.

2. Custom Hooks Pattern (커스텀 훅 패턴)

useCreateRoom, useVerifyEmail 같은 재사용 가능한 훅으로 로직을 캡슐화합니다.

3. Data Fetching Abstraction (데이터 페칭 추상화)

API 호출을 선언적으로 관리하는 추상화 레이어입니다.

목적

🎯 핵심 목적

서버와의 통신을 "상태"가 아닌 "비동기 이벤트"로 다루기

구체적 목적들

1. 서버 상태와 클라이언트 상태 분리

`// ❌ 기존: 서버 데이터를 클라이언트 상태로 관리 const [data, setData] = useState(null); const [loading, setLoading] = useState(false); const [error, setError] = useState(null);

// ✅ React Query: 서버 상태는 자동 관리 const { data, isLoading, error } = useQuery(...)`

2. 보일러플레이트 제거

• 로딩/에러/성공 상태를 수동으로 관리할 필요 없음
• try/catch/finally 블록 제거
• 일관된 패턴으로 코드 간소화

3. 자동 캐싱 & 동기화

// 같은 데이터를 여러 곳에서 요청해도 중복 호출 없음 const { data } = useRoom('room-123'); // 첫 호출 → API 요청 const { data } = useRoom('room-123'); // 다른 컴포넌트 → 캐시 사용

4. 백그라운드 자동 갱신

// 창이 포커스될 때 자동으로 데이터 갱신 refetchOnWindowFocus: true

5. 재사용성

// 어디서든 같은 로직 재사용 const mutation = useCreateRoom(); mutation.mutate(data);

비유

기존 방식: 직접 레스토랑에 가서 주문하고, 주방 상태 확인하고, 음식 가져오기 React Query: 웨이터(React Query)에게 주문만 하면 알아서 처리

이것이 해결하는 문제들

문제 React Query 해결책

중복 API 호출	자동 캐싱
오래된 데이터	백그라운드 갱신
로딩/에러 관리	자동 상태 관리
코드 중복	재사용 가능한 훅
경쟁 조건	요청 취소 & 중복 방지

다른 솔루션과 비교

• SWR: 비슷한 목적 (Vercel 제작)
• RTK Query: Redux Toolkit에 내장
• Apollo Client: GraphQL 전용

React Query는 REST API에서 가장 널리 사용되는 표준입니다!