dream-image/use-react-effect

use-react-effect은(는) 무엇을 하나요?

React Effect의 올바른 사용, 리팩토링 및 코드 리뷰를 위한 Codex 스킬

주요 기능

• Effect 의존성 배열 검사 및 수정
• Effect 내부에서 상태 업데이트 리팩토링
• 불필요한 Effect 제거 (이벤트 핸들러, 계산된 값 등으로 대체)
• Effect 정리(cleanup) 함수 구현 패턴 제공
• React 18 Strict Mode 호환성 확인
• 커스텀 훅으로 Effect 추출 권장

사용 방법

1. 코드 리뷰 시 Effect가 포함된 컴포넌트를 선택합니다.
2. useEffect 관련 문제점을 자동으로 분석합니다.
3. 적절한 리팩토링 제안을 제공합니다.

예시

// Before (문제 있는 Effect)
useEffect(() => {
  fetchData().then(setData);
}, []);

// After (리팩토링된 Effect)
useEffect(() => {
  let cancelled = false;
  fetchData().then(result => {
    if (!cancelled) setData(result);
  });
  return () => { cancelled = true; };
}, []);

지원 환경

• Codex (OpenAI)
• VS Code + Codex 확장
• 모든 React 프로젝트 (JavaScript/TypeScript)