react-modernization은(는) 무엇을 하나요?
React 애플리케이션을 최신 버전으로 업그레이드하고, 클래스 컴포넌트를 훅으로 마이그레이션하며, 동시성 기능을 도입합니다. React 코드베이스를 현대화하거나, React Hooks로 마이그레이션하거나, 최신 React 버전으로 업그레이드할 때 사용하세요.
개요
이 스킬은 기존 React 애플리케이션을 현대화하는 과정을 안내합니다. 주요 목표는 다음과 같습니다:
- React 버전 업그레이드 (예: 16.x → 18.x 또는 19.x)
- 클래스 컴포넌트를 함수형 컴포넌트와 Hooks로 변환
- Concurrent Features 도입 (예:
useTransition,useDeferredValue,Suspense) - 레거시 API (
componentWillMount등)를 최신 API로 대체
지원 플랫폼
- Claude Code
- Cursor
- Codex
- 기타 AI 코딩 에이전트
사용 방법
-
현재 React 버전 및 의존성 확인
package.json에서react및react-dom버전 확인- 사용 중인 레거시 API 목록 작성
-
업그레이드 계획 수립
- 단계별 마이그레이션 전략 수립 (예: 먼저 React 17로 업그레이드 후 18로)
- 각 단계에서의 잠재적 호환성 문제 식별
-
코드 변경 실행
- 클래스 컴포넌트를 함수형 컴포넌트로 변환
- 생명주기 메서드를
useEffect,useState등으로 대체 - 동시성 기능 선택적 도입
-
테스트 및 검증
- 마이그레이션 후 모든 기능이 정상 동작하는지 확인
- 타입스크립트 사용 시 타입 에러 확인
주요 마이그레이션 패턴
| 레거시 패턴 | 현대적 패턴 |
|---|---|
class App extends React.Component | function App() { ... } |
componentDidMount | useEffect(() => { ... }, []) |
componentDidUpdate | useEffect(() => { ... }, [deps]) |
componentWillUnmount | useEffect(() => { return () => { ... }; }, []) |
this.state 및 this.setState | useState 훅 |
this.props | 함수 매개변수로 직접 전달 |
참고 사항
- 모든 변경 사항은 점진적으로 적용해야 합니다. 한 번에 모든 것을 바꾸려고 하지 마세요.
- 마이그레이션 전후로 코드 리뷰를 진행하는 것이 좋습니다.
- React 18 이상에서는
createRootAPI를 사용해야 합니다 (ReactDOM.render대신). - 동시성 기능은 필요에 따라 선택적으로 도입하세요. 모든 애플리케이션에 필수는 아닙니다.
예시 명령어
# React 버전 업그레이드
npm install react@latest react-dom@latest
# 타입스크립트 사용 시 @types/react 업데이트
npm install --save-dev @types/react@latest
자세한 내용은 React 공식 문서를 참조하세요.