--- name: react-modernization description: 업그레이드 React 애플리케이션 에 최신 버전, migrate 에서 클래스 컴포넌트 에 hooks, 및 adopt concurrent 기능. Use 때 modernizing React codebases, migrating 에 React Hooks, 또는 upgrading 에 최신 React 버전. --- # React Modernization 마스터 React 버전 업그레이드합니다, 클래스 에 hooks 마이그레이션, concurrent 기능 adoption, 및 codemods 위한 자동화된 변환. ## 때 에 Use This Skill - Upgrading React 애플리케이션 에 최신 버전 - Migrating 클래스 컴포넌트 에 기능적인 컴포넌트 와 함께 hooks - Adopting concurrent React 기능 (Suspense, transitions) - Applying codemods 위한 자동화된 리팩토링 - Modernizing 상태 관리 패턴 - Updating 에 TypeScript - Improving 성능 와 함께 React 18+ 기능 ## 버전 업그레이드 경로 ### React 16 → 17 → 18 **Breaking 변경합니다 에 의해 버전:** **React 17:** - 이벤트 delegation 변경합니다 - 아니요 이벤트 풀링 - Effect cleanup timing - JSX transform (아니요 React import 필요한) **React 18:** - Automatic 배치 - Concurrent 렌더링 - Strict 최빈값 변경합니다 (double 호출) - 새로운 근 API - Suspense 에 서버 ## 클래스 에 Hooks 마이그레이션 ### 상태 관리 ```javascript \/\/ Before: Class component class Counter extends React.Component { constructor(props) { super(props); this.state = { count: 0, name: '' }; } increment = () => { this.setState({ count: this.state.count + 1 }); } render() { return (

Count: {this.state.count}<\/p>