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

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

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

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

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

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

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)

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

SWR (lightweight alternative)

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)

// 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 의 정리