스킬 react-modernization

⚛️

react-modernization

Name: react-modernization
Author: wshobson

안전 🌐 네트워크 접근⚡ 스크립트 포함⚙️ 외부 명령어

현대적 패턴으로 React 앱 업그레이드

레거시 React 코드는 업그레이드를 늦추고 호환성 문제를 숨깁니다. 이 스킬은 hooks와 React 18 기능으로 전환하는 명확한 단계를 제공합니다.

지원: Claude Codex Code(CC)

📊 69 적절함

스킬 ZIP 다운로드

Claude에서 업로드

설정 → 기능 → 스킬 → 스킬 업로드로 이동

토글을 켜고 사용 시작

테스트해 보기

"react-modernization" 사용 중입니다. React 17 앱을 React 18으로 업그레이드하기 위한 체크리스트를 알려줘.

예상 결과:

react와 react-dom을 18으로 업데이트하고 타입 패키지 정렬
createRoot로 전환하고 StrictMode에서 테스트
batching 동작 검증하고 사이드 이ffects 수정

보안 감사

안전

v4 • 1/17/2026

This skill contains only static documentation content with React modernization patterns. No executable scripts, network calls, file system access, or external command execution were detected. All 55 static findings are FALSE POSITIVES - the scanner misclassified documentation text and code examples as security threats.

스캔된 파일

689

분석된 줄 수

발견 사항

총 감사 수

위험 요인

감사자: claude 감사 이력 보기 →

품질 점수

아키텍처

100

유지보수성

콘텐츠

커뮤니티

100

보안

사양 준수

만들 수 있는 것

React 18 업그레이드 계획

호환성 변경 사항과 테스트 단계가 포함된 단계별 업그레이드 계획을 수립합니다.

클래스 컴포넌트 변환

안전한 생명주기 매핑을 통해 레거시 클래스를 hooks로 변환합니다.

현대화 가이드 생성

codemods와 성능 팁이 포함된 현대화 체크리스트를 제공합니다.

이 프롬프트를 사용해 보세요

업그레이드 경로

React 16에서 React 18으로의 안전한 업그레이드 경로를 주요 호환성 변경 사항과 테스트 단계와 함께 설명해줘.

Class to hooks

이 상태와 생명주기 메서드를 가진 클래스 컴포넌트를 hooks로 변환하고 각 변경 사항을 설명해줘.

동시성 기능

React 18에서 transitions와 자동 batching을 추가하는 방법을 짧은 예제와 함께 설명해줘.

Codemod 계획

React 현대화를 위해 실행할 codemods 목록과 가장 안전한 실행 순서를 알려줘.

모범 사례

점진적으로 업그레이드하고 각 단계 후 테스트
반복적인 변경에는 codemods 사용
릴리스 전에 StrictMode에서 동작 검증

피하기

모든 의존성을 한 번에 업그레이드
StrictMode 경고 무시
테스트 없이 컴포넌트 변환

자주 묻는 질문

어떤 React 버전을 다루나요?

React 16부터 React 18까지의 업그레이드 가이드를 다룹니다.

주된 한계는 무엇인가요?

가이드라인만 제공하고 codemods, 빌드, 테스트는 실행하지 않습니다.

내 레포지토리와 통합되나요?

컨텍스트를 참조할 수 있지만 파일에 직접 접근하거나 변경할 수는 없습니다.

내 데이터를 읽거나 보내나요?

아니요. 정적 가이드라인이며 파일, 환경변수, 네트워크에 접근하지 않습니다.

업그레이드 중 문제가 발생하면 어떻게 해야 하나요?

체크리스트를 따르고, StrictMode에서 단계별로 테스트하며 경고를 해결하세요.

린트와 어떻게 다른가요?

업그레이드 전략과 패턴을 설명하지 코드를 강제하지 않습니다.

개발자 세부 정보

작성자

wshobson

라이선스

MIT

리포지토리

https://github.com/wshobson/agents/tree/main/plugins/framework-migration/skills/react-modernization

참조

main

파일 구조

📄 SKILL.md