---
id: FE-REFACT-LEGACY-001
category: "10_Wiki/💡 Topics/AI"
confidence_score: 1.0
tags: [react, refactoring, legacy-code, [[Technical-Debt|Technical-Debt]], hooks, typescript, [[Modularity|Modularity]]]
last_reinforced: 2026-04-26
---

# Refactoring Legacy React Codebases (레거시 React 코드 리팩토링)

## 📌 한 줄 통찰 (The Karpathy Summary)
> "코드를 한꺼번에 뒤엎으려는 유혹을 뿌리치고, 정상 작동하는 기능을 보호하며 점진적으로 현대적인 패턴(Hooks, TS, Modularity)으로 이식하여 시스템의 부패를 멈춰라" — 기술 부채를 자산으로 전환하는 전략적 코드 현대화 프로세스.

## 📖 구조화된 지식 (Synthesized Content)
- **추출된 패턴:** "Incremental Modernization and Safe Extraction" — 대규모 변경 대신, 컴포넌트 하나씩 또는 로직 한 단위씩을 추출하여 최신 React 패턴으로 교체하고 테스트로 검증하는 패턴.
- **리팩토링 핵심 단계:**
    - **Identify Technical Debt:** 거대 컴포넌트(God Components), 복잡한 클래스 생명주기 로직, 타입 정의 부재 식별.
    - **Establish Safety Net:** 변경 전 기존 동작을 검증할 수 있는 단위/통합 테스트 코드 확보.
    - **[[Logic|Logic]] Extraction (Hooks):** 클래스 컴포넌트의 복잡한 로직을 커스텀 훅으로 추출하여 기능과 UI 분리.
    - **Incremental TypeScript Adoption:** 가장 핵심적인 데이터 모델부터 점진적으로 타입을 적용.
    - **Component Decomposition:** 거대 컴포넌트를 작고 명확한 책임을 가진 하위 컴포넌트로 분해.
- **의의:** 서비스 중단 없이 코드의 유지보수성을 향상시키고, 최신 에코시스템([[Next.js|Next.js]], [[Server Components|Server Components]] 등)으로의 마이그레이션 기반을 마련함.

## ⚠️ 모순 및 업데이트 (Contradictions & RL Update)
- **과거 데이터와의 충돌:** 과거에는 '빅뱅 방식(전체 재작성)'이 효율적이라고 생각하기도 했으나, 현대 정책은 리스크 관리 차원에서 '점진적 리팩토링 정책'을 압도적으로 선호함.
- **정책 변화:** Antigravity 프로젝트는 모든 신규 기능 개발 시 관련 레거시 코드의 10% 리팩토링을 병행하는 'Boy Scout Rule' 정책을 시행하며, 리팩토링 시 테스트 커버리지 유지를 의무화함.

## 🔗 지식 연결 (Graph)
- [[Clean-Code-Principles|Clean-Code-Principles]], [[Custom-Hooks-Patterns|Custom-Hooks-Patterns]], Technical-Debt-[[Management|Management]], [[Frontend-Architecture|Frontend-[[Architecture]]-and-Folder-Structure]]
- **Raw Source:** 00_Raw/Legacy React Code Refactoring.md, 00_Raw/Refactoring Legacy React Codebases.md