# [[Legacy Code Modernization]]

## 📌 Brief Summary
레거시 코드 모더니제이션(Legacy Code Modernization)은 애플리케이션의 기존 동작을 그대로 유지하면서 코드베이스의 구조, 유지보수성 및 확장성을 향상시키기 위해 코드를 재구성하고 업데이트하는 과정입니다 [1]. React 애플리케이션의 경우, 클래스 기반 컴포넌트를 최신 함수형 컴포넌트와 훅(Hooks)으로 마이그레이션하고 오래된 라이브러리를 교체하며 기술 부채를 점진적으로 관리하는 작업이 포함됩니다 [1, 2]. 이 과정은 시스템의 전면적인 재작성(rewrite)을 피하고, 테스트 기반의 점진적인 리팩토링을 통해 안전하게 진행되어야 합니다 [1, 3].

## 📖 Core Content
* **점진적 마이그레이션 전략 (Incremental Migration Strategies):** 기존 아키텍처나 기술(예: Context API에서 Zustand로의 전환)을 마이그레이션할 때, 한 번에 전체를 재작성하는 것은 위험하므로 "재작성이 아닌 리팩토링(refactor, do not rewrite)" 철학을 따라야 합니다 [1]. 한 번에 하나의 상태 스토어나 모듈씩 점진적으로 이동해야 아키텍처를 현대화하는 동안에도 새로운 기능 개발을 지속할 수 있습니다 [1].
* **사전 준비 및 테스트:** 리팩토링의 첫 번째 방어선은 유닛 테스트(Unit Test)를 작성하는 것입니다 [3]. 테스트를 작성하면 애플리케이션의 여러 부분이 어떻게 동작하는지 억지로라도 학습하게 되며, 코드를 개선하는 과정에서 발생할 수 있는 회귀(regression) 에러를 방지할 수 있습니다 [3, 4]. 코드를 수정하기 전, 비즈니스 로직의 목적을 파악하고 라우팅, 인증, API 호출 및 전역 상태를 먼저 매핑(mapping)하여 멘탈 모델을 구축하는 것이 필수적입니다 [5, 6].
* **React 특화 모더니제이션 핵심 목표 (Quick Wins):** 
  * 기존의 클래스 기반 컴포넌트를 함수형 컴포넌트와 훅(Hooks)으로 전환합니다 [2].
  * 불필요한 `useEffect` 사용을 식별하고 모두 제거합니다 [2].
  * 서버 상태(Server state) 관리를 위해 TanStack Query(React Query) 등을 도입하고, 기존의 무거운 Redux 구현체를 덜어냅니다. 남은 클라이언트 전역 상태는 Zustand나 Context로 관리합니다 [2].
  * JavaScript 코드베이스라면 TypeScript로 마이그레이션하여 타입 안정성을 확보합니다 [2]. (다만, 복잡성을 고려해 점진적으로 도입할 수 있습니다 [7]).
  * 지원이 중단된(deprecated) 라이브러리를 업데이트하고, 최신 React 버전에 맞춥니다 [2].
* **아키텍처 개선 및 커스텀 훅의 활용:** 컴포넌트는 단일 책임 원칙(SRP), DRY, YAGNI 원칙에 기반하여 작고 명확하게 유지되어야 합니다 [8]. 최신 React 환경에서 리팩토링의 주요 단위는 '커스텀 훅'입니다. 거대한 컴포넌트 내부에 혼재된 비즈니스 로직(데이터 페칭, 폼 핸들링 등)을 커스텀 훅으로 추출하여 UI와 로직을 격리하면, 결합도를 낮추고 테스트 용이성을 크게 높일 수 있습니다 [9-11].
* **린팅 및 거버넌스 도입:** ESLint(예: `eslint-plugin-react`, `eslint-plugin-react-hooks` 등)를 프로젝트와 IDE에 적용하여 개발 모범 사례를 강제하고 코드 냄새(code smell)를 식별 및 방지해야 합니다 [12].

## 🔗 Knowledge Connections
- **Related Topics:** [[Refactoring Techniques]], [[Technical Debt Management]], [[Clean Code Principles]], [[Single Responsibility Principle]], [[State Management Migration]]
- **Projects/Contexts:** [[React Frontend Development]], [[Feature-Sliced Design]]
- **Contradictions/Notes:** 레거시 코드 리팩토링 전략을 구상할 때 Claude Code 등 AI 도구의 도움을 받아 분석과 개선을 진행하라는 추천이 있는 반면 [11, 13, 14], 시스템의 비즈니스 로직과 흐름을 개발자 스스로 완벽히 이해하고 테스트 코드를 보강하는 과정이 선행되지 않으면 의미가 없다는 시각이 함께 존재합니다 [5]. 또한, 상태 관리 리팩토링 시 Context에서 Zustand로의 이전은 쉽지만, 구조화가 덜 된 상태에서 Zustand를 남용하다 나중에 Redux로 마이그레이션해야 할 때는 과정이 매우 고통스러울 수 있다는 점을 유의해야 합니다 [15].

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