# [[Refactoring Legacy React Codebases]]

## 📌 Brief Summary
레거시 React 코드베이스 리팩토링은 기존 앱의 동작을 변경하지 않으면서 오래되고 복잡한 코드를 유지보수와 확장이 쉬운 현대적인 구조로 개선하는 작업입니다 [1-3]. 이 과정은 클래스형 컴포넌트의 전환, 타입스크립트(TypeScript) 도입, 최신 라이브러리 업데이트 및 상태 관리 최적화를 통해 코드의 품질을 높이는 것을 목표로 합니다 [4]. 성공적인 리팩토링을 위해서는 사전에 비즈니스 로직을 완벽히 파악하고 테스트 코드를 작성하여 회귀(regression)를 방지하는 것이 필수적입니다 [5, 6].

## 📖 Core Content

*   **사전 분석 및 단위 테스트 도입**
    리팩토링을 시작하기 전, 애플리케이션의 비즈니스 로직, 라우팅, 인증 및 API 호출 방식을 완전히 이해해야 합니다 [6, 7]. 코드를 수정하면서 기존 기능이 망가지는 것을 방지하기 위해 가장 먼저 단위 테스트(Unit Test)를 작성하는 것이 강력히 권장됩니다 [5, 8, 9]. `testing-library` 등을 활용하여 테스트를 작성하면 애플리케이션의 동작 방식을 강제로 학습하게 되는 이점도 있습니다 [8].
*   **컴포넌트 및 코드 베이스 현대화**
    코드베이스가 JavaScript로 작성되었다면 TypeScript로 업데이트하는 것이 좋습니다 [4]. 또한, 오래된 클래스 기반 컴포넌트를 함수형 컴포넌트와 훅(Hooks)으로 전환하고, 사용이 중단된 라이브러리 및 React 버전을 최신으로 업데이트해야 합니다 [4]. 여러 파일에 혼재되어 있는 CSS 스타일링 방식(예: 외부 CSS, sx, style 태그 등)은 하나로 통일하여 표준화해야 합니다 [10-12].
*   **상태 관리 최적화 및 점진적 마이그레이션**
    불필요한 `useEffect` 사용을 모두 제거하여 성능을 최적화해야 합니다 [4]. 기존의 무거운 전역 상태 관리(예: Redux)를 덜어내고, 서버 상태 관리는 TanStack Query로, 전역 클라이언트 상태는 Context나 Zustand로, 로컬 상태는 컴포넌트 내부로 위치시키는 것이 좋습니다 [4]. 구조를 변경할 때는 "전면 재작성(Rewrite)"이 아닌, 한 번에 하나의 스토어나 유틸리티씩 변경하는 "점진적 마이그레이션" 전략을 취해야 합니다 [1].
*   **클린 코드 및 엔지니어링 원칙 적용**
    하나의 컴포넌트에 혼재된 여러 책임들을 분리하여 컴포넌트의 크기를 줄여야 합니다 [13]. 복잡한 데이터 페칭이나 폼 핸들링 같은 비즈니스 로직은 커스텀 훅(Custom Hooks)으로 추출하여 모듈성과 테스트 가능성을 높여야 합니다 [14]. 또한, ESLint를 도입하여 모범 사례와 스타일을 강제하고, DRY(Don't Repeat Yourself) 및 YAGNI(You Aren't Gonna Need It) 원칙을 적용해 불필요한 코드를 정리하는 것이 중요합니다 [15, 16].

## 🔗 Knowledge Connections
- **Related Topics:** [[Clean Code Principles]], [[State Management]], [[Software Engineering Principles]], [[Unit Testing]]
- **Projects/Contexts:** [[React Frontend Development]], [[Legacy System Migration]]
- **Contradictions/Notes:** 앱의 규모가 작을 경우, 기존 코드를 리팩토링하는 것보다 차라리 처음부터 새로운 앱을 다시 작성하는 것이 더 쉬울 수도 있다는 의견도 존재합니다 [17]. 또한 코드를 전면 재작성(Rewrite)하기보다는 안전한 점진적 리팩토링(Incremental Migration)을 수행하는 것이 시스템 안정성 측면에서 권장됩니다 [1].

---
*Last updated: 2026-04-26*