component-refactoring
복잡한 React 컴포넌트 리팩토링
복잡한 React 컴포넌트는 테스트와 유지보수가 어려워집니다. 이 스킬은 커스텀 훅 추출, 하위 컴포넌트 분리, Dify 전용 컨벤션 적용을 통해 고复杂度 컴포넌트를 리팩토링하기 위한 패턴과 워크플로를 제공합니다.
Télécharger le ZIP du skill
Importer dans Claude
Allez dans Paramètres → Capacités → Skills → Importer un skill
Activez et commencez à utiliser
Tester
Utilisation de "component-refactoring". Analyze complexity of web/app/components/workflow/index.tsx
Résultat attendu:
Complexity Analysis:
- Total Complexity: 72 (target: <50)
- Max Function Complexity: 28
- Line Count: 420 (target: <300)
Top Complexity Drivers:
1. handleSubmit callback: +15 complexity (nested conditions)
2. useEffect for data sync: +12 complexity (nested callbacks)
3. render methods: +10 complexity (switch/case chains)
Recommended Actions:
1. Extract useWorkflowState hook
2. Split form handling into separate component
3. Move data sync logic to useEffect hook
Utilisation de "component-refactoring". Extract hooks from ConfigurationForm component
Résultat attendu:
Extracted Hooks:
- useModelConfig: Manages model configuration state
- useDatasetSelection: Handles dataset picker logic
- useFormValidation: Form validation logic
File Structure:
web/app/components/form/
hooks/
use-model-config.ts
use-dataset-selection.ts
use-form-validation.ts
ConfigurationForm.tsx
index.ts
Audit de sécurité
SûrThis is a documentation and guidance skill for React component refactoring. Static analyzer flagged 214 potential issues in markdown documentation files, all of which are false positives: backticks in code examples were detected as shell commands, code patterns triggered crypto/blocker alerts, and Object.keys() was flagged as certificate/key files. The skill provides reference documentation only and does not execute any code.
Score de qualité
Ce que vous pouvez construire
컴포넌트 복잡도 감소
React 컴포넌트의 복잡도 임계값(>50)이나 라인 수(>300)를 초과할 때, 이 스킬을 사용하여 훅 추출과 컴포넌트 분리를 통해 체계적으로 복잡도를 줄이세요.
훅 패턴 표준화
hooks/ 하위 디렉토리 또는 use- 접두사 명명 규칙과 함께 컴포넌트 근처에 커스텀 훅을 구성하기 위한 Dify 컨벤션을 적용하세요.
테스트를 위한 컴포넌트 준비
복잡한 컴포넌트를 테스트하기 전에 리팩토링하여 컴포넌트가 테스트 가능하고 복잡도 임계값을 충족하도록 하세요.
Essayez ces prompts
pnpm analyze-component을 사용하여 web/app/components/example.tsx의 복잡도를 확인하세요. 복잡도 점수와 주요 복잡도 유발 요인은 무엇인가요?
web/app/components/form-config/index.tsx를 분석하고 커스텀 훅 추출 기회를 식별하세요. Dify 컨벤션이 적용된 제안된 훅 구조를 보여주세요.
web/app/components/config/index.tsx에 있는 Configuration 컴포넌트의 복잡도가 85입니다. Dify 패턴을 유지하면서 하위 컴포넌트로 분할하는 방법을 제안해주세요.
web/app/components/app/configuration/index.tsx에서 pnpm analyze-component을 실행하고 훅 추출, 하위 컴포넌트 분리, 복잡도 감소 목표를 포함한 전체 리팩토링 계획을 생성하세요.
Bonnes pratiques
- 리팩토링 전에 복잡도 분석을 실행하여 기준 지표를 설정하세요
- 상태 관리가 3-5개의 useState 호출을 초과하면 조기에 훅을 추출하세요
- Dify 명명 규칙 준수: hooks/ 디렉토리에 훅 배치 또는 use-*.ts 접두사 사용
Éviter
- 이미 복잡도 임계값을 충족하는 컴포넌트를 불필요하게 리팩토링
- 단일 컴포넌트에서만 사용되는 훅 추출(인라인 선호)
- 코드 탐색을 방해하는 너무 많은 소형 컴포넌트 생성