1. 이 데이터의 원본이 서버에 있는가?
   → 예: 서버 상태 (TanStack Query / SWR / RSC)
 
2. 새로고침하거나 링크로 공유했을 때 유지돼야 하는가?
   → 예: URL 상태 (searchParams)
 
3. 사용자가 지금 입력 중인 값인가?
   → 예: 폼 상태 (React Hook Form / 비제어 input)
 
4. 다른 값에서 계산할 수 있는가?
   → 예: 상태가 아니다. 계산해라.
 
5. 나머지
   → 클라이언트 상태. 한 컴포넌트 안이면 useState,
      멀리 떨어진 컴포넌트끼리 공유하면 Zustand/Jotai

// 나쁨 — 상태 세 개, 동기화 이펙트 두 개
const [items, setItems] = useState<Item[]>([]);
const [filtered, setFiltered] = useState<Item[]>([]);
const [total, setTotal] = useState(0);
 
useEffect(() => setFiltered(items.filter(i => i.active)), [items]);
useEffect(() => setTotal(filtered.reduce((s, i) => s + i.price, 0)), [filtered]);
 
// 좋음 — 상태 하나
const [items, setItems] = useState<Item[]>([]);
const filtered = items.filter(i => i.active);
const total = filtered.reduce((s, i) => s + i.price, 0);

// Redux 시절 — 슬라이스마다 반복
const usersSlice = createSlice({
  name: 'users',
  initialState: { data: [], loading: false, error: null, lastFetch: 0 },
  reducers: {
    loading(s) { s.loading = true; s.error = null; },
    loaded(s, a) { s.data = a.payload; s.loading = false; s.lastFetch = Date.now(); },
    failed(s, a) { s.error = a.payload; s.loading = false; },
  },
});
// + thunk + 중복 요청 방지 + 캐시 만료 체크 + 다른 화면에서 갱신했을 때 동기화...

// 서버 상태 도구
const { data, isPending, error } = useQuery({
  queryKey: ['users', teamId],
  queryFn: () => api.getUsers(teamId),
  staleTime: 60_000,
});

queryClient.invalidateQueries({ queryKey: ['users'] });          // users로 시작하는 전부
queryClient.invalidateQueries({ queryKey: ['users', teamId] });  // 이 팀만

const mutation = useMutation({
  mutationFn: (item: Item) => api.addItem(item),
 
  onMutate: async (newItem) => {
    // 1. 진행 중인 refetch를 취소 (돌아와서 내 낙관 업데이트를 덮어쓰지 않도록)
    await queryClient.cancelQueries({ queryKey: ['cart'] });
 
    // 2. 롤백용 스냅샷
    const previous = queryClient.getQueryData<Item[]>(['cart']);
 
    // 3. 미리 반영
    queryClient.setQueryData<Item[]>(['cart'], old => [...(old ?? []), newItem]);
 
    return { previous };
  },
 
  onError: (_err, _newItem, context) => {
    queryClient.setQueryData(['cart'], context?.previous);   // 4. 되돌리기
  },
 
  onSettled: () => {
    queryClient.invalidateQueries({ queryKey: ['cart'] });   // 5. 결국 서버가 진실
  },
});

// 흔한 코드
const [page, setPage] = useState(1);
const [sort, setSort] = useState('created');
const [filters, setFilters] = useState({ status: 'all' });

// Next.js App Router
function useQueryState(key: string, defaultValue: string) {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  const value = searchParams.get(key) ?? defaultValue;
 
  const setValue = React.useCallback((next: string) => {
    const params = new URLSearchParams(searchParams.toString());
    if (next === defaultValue) params.delete(key);   // 기본값이면 URL을 더럽히지 않는다
    else params.set(key, next);
    router.replace(`${pathname}?${params}`, { scroll: false });
  }, [key, defaultValue, pathname, router, searchParams]);
 
  return [value, setValue] as const;
}

const [status] = useQueryState('status', 'all');
const { data } = useQuery({
  queryKey: ['orders', { status }],   // URL이 바뀌면 쿼리 키가 바뀌고, 알아서 다시 가져온다
  queryFn: () => api.getOrders({ status }),
});

// 20개 필드 폼을 전부 제어 컴포넌트로 만들면
const [form, setForm] = useState(initialValues);
// 키 한 번 누를 때마다 폼 전체(+자식 20개)가 리렌더된다

const { register, handleSubmit, formState: { errors } } = useForm<FormValues>();
 
<input {...register('email', { required: '필수입니다' })} />

// Before — 전부 Redux
{
  orders: { data, loading, error },         // 서버
  orderFilters: { status, dateRange },      // URL
  orderForm: { customerName, items },       // 폼
  selectedOrderIds: [],                     // 클라이언트
  sidebarOpen: true,                        // 클라이언트
}

// After
const [status] = useQueryState('status', 'all');                 // URL
const { data: orders } = useQuery({ queryKey: ['orders', { status }], ... });  // 서버
const { register, handleSubmit } = useForm<OrderForm>();         // 폼
const selected = useSelectionStore(s => s.selectedIds);          // 클라이언트
const sidebarOpen = useUIStore(s => s.sidebarOpen);              // 클라이언트

setState 호출
  → 해당 컴포넌트를 "dirty"로 표시
  → 컴포넌트 함수를 다시 실행 (자식들도 따라서 다시 실행)
  → 새 엘리먼트 트리와 이전 트리를 비교
  → 달라진 DOM만 수정

// key가 index면 — 앞에 항목을 삽입했을 때 전부 "내용이 바뀐 것"으로 처리된다
{items.map((item, i) => <Row key={i} item={item} />)}
 
// key가 id면 — 삽입된 하나만 새로 만들고 나머지는 이동시킨다
{items.map(item => <Row key={item.id} item={item} />)}

// 1. 상태를 필요한 곳까지 내린다 (가장 근본적)
// 2. children으로 잘라내기 — Provider가 리렌더돼도 children은 다시 안 만들어진다
function Layout({ children }) {
  const [open, setOpen] = useState(false);
  return <Ctx.Provider value={{ open, setOpen }}>{children}</Ctx.Provider>;
}
// 3. React.memo / useMemo / useCallback (수동)
// 4. React Compiler (자동)

const targetMap = new WeakMap<object, Map<PropertyKey, Set<Effect>>>();
let activeEffect: Effect | null = null;
 
function reactive<T extends object>(target: T): T {
  return new Proxy(target, {
    get(obj, key, receiver) {
      track(obj, key);                                // 누가 읽었는지 기록
      const result = Reflect.get(obj, key, receiver);
      return typeof result === 'object' && result !== null
        ? reactive(result)                            // 중첩 객체도 감싼다
        : result;
    },
    set(obj, key, value, receiver) {
      const old = obj[key as keyof T];
      const result = Reflect.set(obj, key, value, receiver);
      if (!Object.is(old, value)) trigger(obj, key);  // 기록해 둔 구독자를 깨운다
      return result;
    },
  });
}
 
function track(target: object, key: PropertyKey) {
  if (!activeEffect) return;                          // 이펙트 밖에서 읽으면 추적 안 함
  let deps = targetMap.get(target);
  if (!deps) targetMap.set(target, (deps = new Map()));
  let set = deps.get(key);
  if (!set) deps.set(key, (set = new Set()));
  set.add(activeEffect);
}
 
function trigger(target: object, key: PropertyKey) {
  targetMap.get(target)?.get(key)?.forEach(effect => effect());
}
 
function effect(fn: () => void) {
  const run = () => { activeEffect = run; fn(); activeEffect = null; };
  run();                                              // 최초 실행 때 의존성이 수집된다
}

const state = reactive({ count: 0 });
const { count } = state;          // 이 순간 원시값이 복사된다 — 더 이상 추적 불가

effect(() => {
  if (state.showDetail) console.log(state.detail);   // showDetail이 false면 detail은 추적 안 됨
});

type Computation = { execute: () => void; deps: Set<Set<Computation>> };
let currentComputation: Computation | null = null;
 
function createSignal<T>(value: T) {
  const subscribers = new Set<Computation>();
 
  const read = (): T => {
    if (currentComputation) {
      subscribers.add(currentComputation);
      currentComputation.deps.add(subscribers);      // 양방향 링크 (정리를 위해)
    }
    return value;
  };
 
  const write = (next: T) => {
    if (Object.is(value, next)) return;
    value = next;
    [...subscribers].forEach(c => c.execute());
  };
 
  return [read, write] as const;
}
 
function createEffect(fn: () => void) {
  const computation: Computation = {
    deps: new Set(),
    execute() {
      cleanup(computation);                          // 이전 구독 해제
      const prev = currentComputation;
      currentComputation = computation;
      try { fn(); } finally { currentComputation = prev; }
    },
  };
  computation.execute();
}
 
function cleanup(c: Computation) {
  c.deps.forEach(subs => subs.delete(c));
  c.deps.clear();
}
 
function createMemo<T>(fn: () => T) {
  const [get, set] = createSignal<T>(undefined as T);
  createEffect(() => set(fn()));                     // fn이 읽는 시그널에 자동 구독
  return get;
}

// 작성한 코드
function Counter() {
  const [count, setCount] = createSignal(0);
  return <div>Count: {count()}</div>;
}
 
// 대략 이렇게 컴파일된다
function Counter() {
  const [count, setCount] = createSignal(0);
  const el = template(`<div>Count: </div>`);
  const textNode = el.firstChild.nextSibling;
  createEffect(() => { textNode.data = count(); });   // 이 텍스트 노드만 구독한다
  return el;
}

const [a, setA] = createSignal(1);
const b = createMemo(() => a() * 2);
const c = createMemo(() => a() + b());     // a와 b 둘 다에 의존
createEffect(() => console.log(c()));