Antigravity Agent
4.0 KiB
4.0 KiB
Legacy React Code Refactoring
📌 Brief Summary
레거시 React 코드 리팩토링은 기존 코드의 동작 방식을 그대로 보존하면서 애플리케이션의 구조, 가독성, 유지보수성을 향상시키는 체계적인 과정입니다 [1]. 이는 단순히 코드를 고치는(fixing) 작업이 아니라 점진적인 구조 개선을 목표로 하며, 테스트 작성을 통해 시스템을 보호하는 것에서 시작합니다 [1, 2]. 주요 접근법으로는 클래스 기반 컴포넌트의 함수형 컴포넌트 전환, 커스텀 훅(Custom Hooks)을 통한 로직 분리, 상태 관리 도구의 현대화 등이 있습니다 [3, 4].
📖 Core Content
- 테스트 기반의 리팩토링 시작 리팩토링을 수행할 때 가장 우선시해야 할 작업은 단위 테스트(Unit test)를 작성하는 것입니다 [2]. 테스트를 작성하면 코드를 변경하는 과정에서 기존 기능이 망가지는 것을 즉각적으로 파악할 수 있으며, 기존 앱이 어떻게 동작하는지 강제로 학습할 수 있는 이점도 있습니다 [2, 5]. TypeScript로의 전환이나 라이브러리 업그레이드 시 UI 테스트 스위트를 작성하여 회귀(Regression) 오류를 방지해야 합니다 [6].
- 구조 및 상태 관리 현대화
- 점진적 마이그레이션: 기존 기술(예: Context API)에서 새로운 도구(예: Zustand)로 전환할 때 한 번에 모든 것을 재작성(Rewrite)하는 것은 위험하므로, 알림 기능과 같은 단순한 유틸리티에서 시작해 점차 복잡한 영역으로 확장하는 점진적 접근이 필요합니다 [1].
- 클래스 컴포넌트 제거: 기존 클래스 기반 컴포넌트들을 함수형 컴포넌트 및 훅(Hooks) 구조로 변경해야 합니다 [4].
- 상태 관리 도구 분리: 불필요한
useEffect사용을 제거하고, 서버 상태 관리에는 TanStack Query를 도입하여 기존의 복잡한 Redux 구현을 걷어낼 수 있습니다. 전역 클라이언트 상태는 Context나 Zustand로 관리하고, 로컬 상태는 해당 컴포넌트에만 국한하는 것이 좋습니다 [4].
- 커스텀 훅을 활용한 로직 분리 및 책임 분배 오래된 코드베이스의 큰 문제 중 하나는 단일 컴포넌트 안에 다양한 책임이 혼재되어 있다는 점입니다 [7]. 현대 React 리팩토링의 핵심 단위는 '커스텀 훅(Custom Hooks)'입니다 [3]. 방대한 컴포넌트에서 데이터 패칭이나 폼 핸들링과 같은 비즈니스 로직을 커스텀 훅으로 추출하면, UI와 비즈니스 로직이 분리되어 독립적으로 더 빠른 단위 테스트를 수행할 수 있게 됩니다 [3].
- 클린 코드와 일관성 강제
- 스타일링 표준화: 인라인 스타일, 외부 CSS, sx 등 무분별하게 혼재된 CSS 적용 방식을 단일 표준(예: Plain CSS, CSS Modules 등)으로 통일해야 합니다 [8-10].
- 원칙 적용: 'DRY(Don't Repeat Yourself)' 및 'YAGNI(You Aren't Gonna Need It)' 원칙을 바탕으로 코드를 개선하고, 변수 호이스팅과 돌연변이(Mutation)를 방지하며 명확한 변수명을 사용해야 합니다 [11].
- 거버넌스 도구 도입: ESLint(특히
eslint-plugin-react,eslint-plugin-react-hooks)를 도입하여 개발 모범 사례를 강제함으로써 코드베이스 전체에 규칙을 일관되게 적용할 수 있습니다 [12].
🔗 Knowledge Connections
- Related Topics: Unit Testing, Custom Hooks, State Management Migration, Clean Code Principles
- Projects/Contexts: Frontend System Architecture, Legacy Code Modernization
- Contradictions/Notes: 일반적으로 전체를 한 번에 새로 짜는 것보다는 기존 기능 개발을 지속하면서 점진적으로 개선(Refactor)하는 것이 권장되지만 [1], 코드베이스의 규모가 매우 작을 경우에는 아예 처음부터 다시 작성하는 것이 더 쉬울 수도 있다는 의견도 존재합니다 [6].
Last updated: 2026-04-26