⚛️ React 완전 가이드

import { useState, useEffect, useCallback } from 'react';

function useFetch<T>(url: string) {
  const [data, setData]   = useState<T | null>(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    let cancelled = false;
    fetch(url)
      .then(r => r.json())
      .then(d => { if (!cancelled) setData(d); })
      .finally(() => { if (!cancelled) setLoading(false); });
    return () => { cancelled = true; };
  }, [url]);

  return { data, loading };
}

import { useActionState, useOptimistic, use } from 'react';

// 폼 제출 상태(pending/error)를 자동으로 관리
function ProfileForm({ updateName }: {
  updateName: (prev: { error?: string }, formData: FormData) => Promise<{ error?: string }>;
}) {
  const [state, formAction, isPending] = useActionState(updateName, {});

  return (
    <form action={formAction}>
      <input name="name" />
      <button type="submit" disabled={isPending}>저장</button>
      {state.error && <p>{state.error}</p>}
    </form>
  );
}

// 서버 응답 전에 UI를 낙관적으로 갱신
function LikeButton({ likes, addLike }: { likes: number; addLike: () => Promise<void> }) {
  const [optimisticLikes, addOptimisticLike] = useOptimistic(likes, (state) => state + 1);
  return (
    <button onClick={async () => { addOptimisticLike(); await addLike(); }}>
      좋아요 {optimisticLikes}
    </button>
  );
}

// Promise를 조건부로 읽기 (Suspense와 연동)
function Comments({ commentsPromise }: { commentsPromise: Promise<{ id: string; text: string }[]> }) {
  const comments = use(commentsPromise);
  return <ul>{comments.map(c => <li key={c.id}>{c.text}</li>)}</ul>;
}

import { create } from 'zustand';

interface BearStore {
  count: number;
  inc: () => void;
  dec: () => void;
}

export const useBearStore = create<BearStore>((set) => ({
  count: 0,
  inc: () => set((s) => ({ count: s.count + 1 })),
  dec: () => set((s) => ({ count: s.count - 1 })),
}));

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

function TodoList() {
  const queryClient = useQueryClient();

  const { data, isPending, error } = useQuery({
    queryKey: ['todos'],
    queryFn: () => fetch('/api/todos').then(r => r.json()),
    staleTime: 30_000,
  });

  const addTodo = useMutation({
    mutationFn: (title: string) =>
      fetch('/api/todos', { method: 'POST', body: JSON.stringify({ title }) }),
    onSuccess: () => queryClient.invalidateQueries({ queryKey: ['todos'] }),
  });

  if (isPending) return <p>로딩 중...</p>;
  if (error) return <p>불러오기 실패</p>;

  return (
    <ul>
      {data.map((todo: { id: string; title: string }) => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

const schema = z.object({
  email: z.string().email('올바른 이메일을 입력하세요'),
  password: z.string().min(8, '8자 이상 입력하세요'),
});
type FormValues = z.infer<typeof schema>;

function LoginForm() {
  const { register, handleSubmit, formState: { errors, isSubmitting } } =
    useForm<FormValues>({ resolver: zodResolver(schema) });

  const onSubmit = async (values: FormValues) => {
    await fetch('/api/login', { method: 'POST', body: JSON.stringify(values) });
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register('email')} />
      {errors.email && <p>{errors.email.message}</p>}
      <input type="password" {...register('password')} />
      {errors.password && <p>{errors.password.message}</p>}
      <button type="submit" disabled={isSubmitting}>로그인</button>
    </form>
  );
}

import { Component, createContext, useContext, useState, type ReactNode } from 'react';

// Error Boundary — 하위 트리 에러가 앱 전체를 무너뜨리지 않게 격리
class ErrorBoundary extends Component<{ fallback: ReactNode; children: ReactNode }, { hasError: boolean }> {
  state = { hasError: false };
  static getDerivedStateFromError() { return { hasError: true }; }
  componentDidCatch(error: unknown) { console.error(error); }
  render() {
    return this.state.hasError ? this.props.fallback : this.props.children;
  }
}

// Compound Component — 내부 상태를 Context로 공유
const TabsContext = createContext<{ active: string; setActive: (id: string) => void } | null>(null);

function Tabs({ defaultTab, children }: { defaultTab: string; children: ReactNode }) {
  const [active, setActive] = useState(defaultTab);
  return <TabsContext.Provider value={{ active, setActive }}>{children}</TabsContext.Provider>;
}
Tabs.Tab = function Tab({ id, children }: { id: string; children: ReactNode }) {
  const ctx = useContext(TabsContext)!;
  return <button onClick={() => ctx.setActive(id)} aria-selected={ctx.active === id}>{children}</button>;
};

import { memo, useMemo, useCallback } from 'react';

// 불필요한 리렌더링 방지
const ListItem = memo(({ item }: { item: Item }) => (
  <div>{item.name}</div>
));

function List({ items }: { items: Item[] }) {
  // 비싼 계산 캐싱
  const sorted = useMemo(
    () => [...items].sort((a, b) => a.name.localeCompare(b.name)),
    [items]
  );
  // 핸들러 캐싱
  const handleClick = useCallback((id: string) => {
    console.log(id);
  }, []);
  return sorted.map(item => <ListItem key={item.id} item={item} />);
}

import { render, screen, fireEvent } from '@testing-library/react';
import { describe, it, expect } from 'vitest';
import { Counter } from './Counter';

describe('Counter', () => {
  it('클릭하면 값이 증가한다', () => {
    render(<Counter />);
    const button = screen.getByRole('button', { name: /count/i });
    fireEvent.click(button);
    expect(screen.getByText('1')).toBeInTheDocument();
  });
});