AI 프롬프트로 React 200% 활용하기

1. 역할: React를 배우는 학생/주니어
2. 맥락: 어떤 컴포넌트/Hook/에러
3. 지시: 구체적 요구사항
4. 형식: 코드+주석 / before-after

함수형 컴포넌트 + props 분해 할당 + 기본값 +
TypeScript 타입까지 포함한 Card 컴포넌트를 만들어줘.
사용 예시 + JSX 핵심 문법 주석 추가.

useState의 setter가 받는 3가지 형태(값/함수형/객체 spread)를
각각 예시 코드로 보여주고, '이전 값에 의존할 때'와
'배치 업데이트' 시 주의점을 비교해줘.

React의 SyntheticEvent와 native event의 차이를
표로 정리하고, e.preventDefault / e.stopPropagation /
e.target vs e.currentTarget 차이를 코드로 보여줘.

조건부 렌더링 4가지(&&, 삼항, early return, switch)와
리스트 렌더링에서 key가 왜 인덱스가 아니라 id여야 하는지를
잘못된 예 vs 올바른 예 코드 비교로 보여줘.

useEffect로 API 데이터를 받는 컴포넌트를 만들어줘.
포함: 의존성 배열 / AbortController로 취소 /
로딩 스켈레톤 / 에러 폴백 / strict mode 더블 호출 대응.

useFetch, useDebounce, useLocalStorage 3가지 커스텀 훅을
각각 만들어줘. 각 훅의 시그니처/사용 예시/
주의점(메모리 누수, SSR 호환성)을 주석으로.

React Router v6로 멀티 페이지 SPA를 설계해줘.
중첩 라우트 / 동적 파라미터 / 보호 라우트(인증) /
useSearchParams로 URL과 상태 동기화 / 404 처리.

React Hook Form + Zod로 회원가입 폼을 만들어줘.
포함: 클라이언트 검증 / 서버 에러 매핑 /
실시간 검증 / 접근성(label, aria-invalid) /
비동기 검증(이메일 중복 확인).

Zustand로 다크 모드 + 인증 + 장바구니 3가지 스토어를 설계해줘.
각 스토어의 분리 기준 / persist 미들웨어 / SSR 호환 /
immer로 불변성 / TypeScript 타입 추론까지.

React 성능 병목 5가지를 진단·해결하는 패턴을 정리해줘.
불필요 리렌더 / 큰 리스트 / 무거운 계산 / 라우트 /
번들 크기. 각각 React.memo / virtualization /
useMemo / lazy / dynamic import 코드 예시.

Testing Library + Vitest로 폼 컴포넌트의 단위 테스트를 작성해줘.
포함: getByRole 우선 / 사용자 인터랙션(userEvent) /
비동기 어설션(findBy) / 모킹(MSW) / accessibility 검사.
TDD 흐름으로.

// ❌ 나쁜 프롬프트: 'useEffect로 데이터 가져와줘'
function BadComp({ id }) {
  const [data, setData] = useState(null);
  useEffect(() => { fetch(`/api/${id}`).then(r => r.json()).then(setData); }, [id]);
  return <div>{data?.name}</div>;
}
// 문제: 취소 없음, 에러 무시, 로딩 모름, 의존성 누락 가능


// ✅ 좋은 프롬프트: 모든 엣지 케이스 + 취소 + 로딩
function GoodComp({ id }) {
  const [state, setState] = useState({ data: null, loading: true, error: null });
  useEffect(() => {
    const ctrl = new AbortController();
    setState({ data: null, loading: true, error: null });
    fetch(`/api/${id}`, { signal: ctrl.signal })
      .then(r => r.ok ? r.json() : Promise.reject(`HTTP ${r.status}`))
      .then(data => setState({ data, loading: false, error: null }))
      .catch(err => err.name !== 'AbortError' && setState(s => ({ ...s, loading: false, error: err })));
    return () => ctrl.abort();
  }, [id]);

  if (state.loading) return <Skeleton />;
  if (state.error) return <ErrorBox onRetry={() => setState({ ...state, loading: true })} />;
  return <div>{state.data?.name}</div>;
}

/*
  📊 비교:
  | 항목      | ❌ 나쁜 | ✅ 좋은 |
  | 취소      | 없음   | AbortController |
  | 로딩 UX   | 깜빡임 | Skeleton |
  | 에러      | 무시   | ErrorBox + retry |
  | strict 더블 호출 | 중복 fetch | cleanup으로 취소 |
  → 프롬프트의 구체성이 코드 품질을 결정합니다!
*/