2nd/10_Wiki/Topics/Frontend/비동기 데이터 관리.md

---
id: wiki-2026-0508-비동기-데이터-관리
title: 비동기 데이터 관리
category: 10_Wiki/Topics
status: verified
canonical_id: self
aliases: [Async Data Management, Server State, Data Fetching]
duplicate_of: none
source_trust_level: A
confidence_score: 0.92
verification_status: applied
tags: [frontend, async, react-query, swr, server-state]
raw_sources: []
last_reinforced: 2026-05-10
github_commit: pending
tech_stack:
  language: typescript
  framework: react-query
---

# 비동기 데이터 관리

## 매 한 줄
> **"매 server state 의 client cache 의 separation"**. 매 fetch / cache / sync / invalidate / retry / dedupe 의 7 concerns 의 library 의 delegation — 매 2026 의 TanStack Query (v5) / SWR / RTK Query 의 standard. Custom `useEffect + fetch` 의 anti-pattern.

## 매 핵심

### 매 server vs client state
- **client state**: form input, modal open/close, theme — local, ephemeral. Zustand/useState.
- **server state**: 매 remote source of truth — async, stale, shared, cached. TanStack Query.

### 매 7 concerns
1. **Fetch**: HTTP request + abort.
2. **Cache**: key-based store.
3. **Dedupe**: 매 simultaneous request 의 share.
4. **Stale**: time-based freshness.
5. **Background refetch**: window focus, reconnect.
6. **Retry**: exponential backoff.
7. **Invalidate**: mutation 후 refetch.

### 매 query lifecycle
```
fetching → fresh (staleTime) → stale → refetch → fresh
                                 ↓
                              gcTime → garbage collect
```

## 💻 패턴

### TanStack Query v5 (React)
```tsx
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';

function UserProfile({ id }: { id: string }) {
  const { data, isLoading, error } = useQuery({
    queryKey: ['user', id],
    queryFn: ({ signal }) => fetch(`/api/users/${id}`, { signal }).then(r => r.json()),
    staleTime: 60_000,        // 1min fresh
    gcTime: 5 * 60_000,       // 5min cache
  });

  if (isLoading) return <Skeleton />;
  if (error) return <Error error={error} />;
  return <Profile user={data} />;
}
```

### Mutation + invalidation
```tsx
function useUpdateUser() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (user: User) =>
      fetch(`/api/users/${user.id}`, {
        method: 'PUT', body: JSON.stringify(user),
      }).then(r => r.json()),
    onSuccess: (_, user) => {
      qc.invalidateQueries({ queryKey: ['user', user.id] });
      qc.invalidateQueries({ queryKey: ['users'] });
    },
  });
}
```

### Optimistic update
```tsx
useMutation({
  mutationFn: toggleTodo,
  onMutate: async (id) => {
    await qc.cancelQueries({ queryKey: ['todos'] });
    const prev = qc.getQueryData(['todos']);
    qc.setQueryData(['todos'], (old: Todo[]) =>
      old.map(t => t.id === id ? { ...t, done: !t.done } : t));
    return { prev };
  },
  onError: (_, __, ctx) => qc.setQueryData(['todos'], ctx?.prev),
  onSettled: () => qc.invalidateQueries({ queryKey: ['todos'] }),
});
```

### Infinite scroll
```tsx
const { data, fetchNextPage, hasNextPage } = useInfiniteQuery({
  queryKey: ['posts'],
  queryFn: ({ pageParam = 0 }) =>
    fetch(`/api/posts?cursor=${pageParam}`).then(r => r.json()),
  getNextPageParam: (last) => last.nextCursor,
  initialPageParam: 0,
});
```

### Suspense mode (React 19)
```tsx
const { data } = useSuspenseQuery({
  queryKey: ['user', id],
  queryFn: fetchUser,
});
// data 의 always defined — Suspense boundary 의 loading 의 handle
```

### SWR (lightweight alternative)
```tsx
import useSWR from 'swr';

const { data, error, mutate } = useSWR(
  `/api/users/${id}`,
  (url) => fetch(url).then(r => r.json()),
  { revalidateOnFocus: true, dedupingInterval: 2000 }
);
```

### Server Components data (Next.js 15 / RSC)
```tsx
// app/users/[id]/page.tsx — runs on server
async function UserPage({ params }: { params: { id: string } }) {
  const user = await fetch(`https://api/users/${params.id}`, {
    next: { revalidate: 60, tags: [`user-${params.id}`] }
  }).then(r => r.json());
  return <Profile user={user} />;
}
```

## 매 결정 기준
| 상황 | Approach |
|---|---|
| React app | TanStack Query v5 |
| Next.js App Router | RSC fetch + Server Actions + tag invalidation |
| Redux app | RTK Query (Redux 의 통합) |
| 매 minimal bundle | SWR (~5KB) |
| 매 GraphQL | Apollo Client / urql |
| 매 simple form fetch | native `fetch` + `useState` 의 OK |

**기본값**: 매 React + REST → TanStack Query, 매 Next.js → RSC fetch.

## 🔗 Graph
- 부모: [[State Management]]
- 응용: [[Optimistic UI]] · [[Infinite Scroll]] · [[React Server Components — 경계 의식]]
- Adjacent: [[AbortController]]

## 🤖 LLM 활용
**언제**: cache key design 의 review, invalidation strategy 의 plan, race condition 의 debug.
**언제 X**: real-time data (WebSocket/SSE 의 substitute).

## ❌ 안티패턴
- **`useEffect + fetch`**: 매 race condition, 매 no dedup, 매 no cache — 매 library 의 use.
- **Global Redux 에 server state**: 매 manual cache management — 매 RTK Query 의 use.
- **Polling 의 abuse**: 매 SSE/WebSocket 의 substitute.
- **`enabled: !!id` 누락**: 매 undefined 의 fetch — false positive.

## 🧪 검증 / 중복
- Verified (TanStack Query v5 docs, Vercel SWR docs, Next.js 15 data fetching).
- 신뢰도 A.

## 🕓 Changelog
| 날짜 | 변경 |
|---|---|
| 2026-05-08 | Phase 1 |
| 2026-05-10 | Manual cleanup — TanStack Query v5 + RSC + optimistic update 의 정리 |