2nd/10_Wiki/Topics/Other/State.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-state	State	10_Wiki/Topics	verified	self	Application State Program State Stateful State Management	none	A	0.9	applied	state programming architecture frontend backend		2026-05-10	pending	language framework typescript agnostic

State

매 한 줄

"매 state = 매 program 의 매 time 의 매 snapshot". 매 변하는 모든 데이터 — 매 UI 의 input value, 매 server 의 user session, 매 game 의 entity transform 까지. 매 state management 가 매 software complexity 의 매 dominant source — Rich Hickey 의 famous "state is hard" quote (Strange Loop 2009).

매 핵심

매 분류

• Local / component state: 매 React useState, 매 Vue ref — 매 single component scope.
• Shared / global state: 매 Redux/Zustand/Pinia/Jotai — 매 multiple components share.
• Server state: 매 React Query/TanStack Query/SWR — 매 server-of-truth 의 매 cache.
• URL state: 매 query params, hash — 매 shareable / bookmarkable.
• Persistent state: 매 localStorage, IndexedDB, DB — 매 across sessions.
• Derived state: 매 computed from base state — 매 NOT stored separately (single source of truth).

매 state 의 trade-off

• 매 mutable vs 매 immutable: 매 immutability → 매 reasoning easier, 매 time-travel debug 가능, 매 perf cost 일부.
• 매 local vs 매 global: 매 global → 매 sharing easy, 매 coupling explosion.
• 매 client vs 매 server: 매 client → 매 latency 0, 매 inconsistency. 매 server → 매 truth 1, 매 latency.
• 매 fine-grained vs 매 coarse: 매 fine → 매 selective re-render, 매 bookkeeping cost.

매 modern (2026) frontend stack

• Local: useState/useReducer (React 19), $state (Svelte 5 runes), ref/computed (Vue 3.5).
• Global: Zustand (most popular React), Jotai (atomic), Pinia (Vue), Redux Toolkit (legacy-heavy).
• Server: TanStack Query 5 (React/Solid/Svelte/Vue), SWR (Vercel), Apollo Client (GraphQL).
• URL: TanStack Router, Next.js useSearchParams, nuqs.
• Form: React Hook Form + Zod (de facto), TanStack Form.

💻 패턴

Pattern 1: Local state (React)

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>{count}</button>;
}

Pattern 2: Global state (Zustand)

import { create } from "zustand";

interface CartState {
  items: { id: string; qty: number }[];
  add: (id: string) => void;
  remove: (id: string) => void;
  total: () => number;
}

export const useCart = create<CartState>((set, get) => ({
  items: [],
  add: (id) => set(s => {
    const existing = s.items.find(i => i.id === id);
    if (existing) return { items: s.items.map(i => i.id === id ? { ...i, qty: i.qty + 1 } : i) };
    return { items: [...s.items, { id, qty: 1 }] };
  }),
  remove: (id) => set(s => ({ items: s.items.filter(i => i.id !== id) })),
  total: () => get().items.reduce((s, i) => s + i.qty, 0),
}));

Pattern 3: Server state (TanStack Query)

import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";

function useUser(id: string) {
  return useQuery({
    queryKey: ["user", id],
    queryFn: () => fetch(`/api/users/${id}`).then(r => r.json()),
    staleTime: 60_000,
  });
}

function useUpdateUser() {
  const qc = useQueryClient();
  return useMutation({
    mutationFn: (u: User) => fetch(`/api/users/${u.id}`, { method: "PUT", body: JSON.stringify(u) }),
    onSuccess: (_, u) => qc.invalidateQueries({ queryKey: ["user", u.id] }),
  });
}

Pattern 4: URL state (nuqs)

import { useQueryState, parseAsInteger } from "nuqs";

function ProductList() {
  const [page, setPage] = useQueryState("page", parseAsInteger.withDefault(1));
  const [sort, setSort] = useQueryState("sort", { defaultValue: "name" });
  // 매 URL = ?page=2&sort=price → 매 shareable, 매 back-button works.
}

Pattern 5: Derived state (NEVER duplicate base)

// 매 BAD — 매 fullName 의 매 별도 state.
const [first, setFirst] = useState("");
const [last, setLast] = useState("");
const [fullName, setFullName] = useState("");  // 매 anti-pattern

// 매 GOOD — 매 derive on render.
const fullName = `${first} ${last}`;

// 매 expensive case → useMemo.
const expensiveResult = useMemo(() => heavyCompute(first, last), [first, last]);

Pattern 6: State machine (XState)

import { setup } from "xstate";

const trafficLight = setup({}).createMachine({
  initial: "red",
  states: {
    red:    { on: { TICK: "green" } },
    green:  { on: { TICK: "yellow" } },
    yellow: { on: { TICK: "red" } },
  },
});
// 매 invalid transition 의 매 compile-time prevention.

매 결정 기준

상황	Approach
매 component-local UI	useState
매 2-3 component shared	Lift state up / Context
매 app-wide global	Zustand / Jotai
매 server data	TanStack Query (NOT global state)
매 form	React Hook Form + Zod
매 URL-bound	nuqs / TanStack Router
매 complex transitions	XState (state machine)
매 persistent	Zustand persist middleware / IndexedDB

기본값: 매 derive whenever possible. 매 store 만 base state. 매 server state 의 매 global state X (TanStack Query 사용).

🔗 Graph

• 부모: State Management · Architecture
• 변형: Server State
• 응용: React · Zustand · XState
• Adjacent: Immutability · State Machine · Single Source of Truth (SSoT)

🤖 LLM 활용

언제: 매 state shape 의 매 design 추천, 매 derived vs base 의 매 audit. 언제 X: 매 LLM 의 매 over-eager Redux 추천 — 매 modern projects 에서 의 outdated.

❌ 안티패턴

• State duplication: 매 derivable 의 매 별도 store — 매 sync bugs.
• Server state in global store: 매 cache invalidation 손수 reimplement — 매 TanStack Query 사용.
• Prop drilling depth >3: 매 Context / state lib 의 매 trigger.
• Premature global: 매 1 component scope 의 매 Zustand store — 매 over-engineering.
• Mutable update: 매 state.items.push(x) (Redux) — 매 React 의 매 re-render miss.

🧪 검증 / 중복

• Verified (React 19 docs, TanStack Query v5 docs, Zustand 4.x, XState v5 docs).
• 신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — State 의 분류, 2026 modern stack, useState/Zustand/TanStack Query/nuqs/XState 패턴 + 기본값 결정표 정리