레거시 React 프로젝트에서 대规模 재작성 대신 영향도 기반 점진적 리팩토링으로Deliver阻滞 없이 코드 품질을 개선하는 전략

Context

레거시 React 프로젝트는 컴포넌트당 200~500줄 이상의 코드, 비즈니스 로직과 렌더링 혼합, useEffect 다중 책임等问题으로 유지보수성이 저하된다. 구성 요소 간 암묵적 의존성과 분산된 global state가 결합하여 리팩토링 시 예상치 못한 버그가 발생한다.

Technical Solution

• [사전 진단] → 문제 영역 파악 없이 폴더 구조 변경이나 패턴 도입을 지양한다
• [최소 기준선 설정] → Component, Hook, Service 역할 분리 규칙을 정의하고 신규 코드부터 적용한다
• [기능 기반 구조] → by-type 구조에서 feature 기반 구조로 전환하여 결합도를 낮춘다
• [점진적 리팩토링] → 코드 수정 시 해당 영역만 개선하고 중복 발견 시 추출하며 혼합 로직은 Hook으로 분리한다
• [사이드 이펙트 중앙화] → React Query 또는 SWR 도입으로 중복 요청과 수동 useEffect 로직을 제거한다
• [반복 컴포넌트 분리] → DashboardView 컴포넌트로 UI와 로직을 명확히 분리한다

Impact

React Query/SWR 도입 시 자동 캐싱과 데이터 동기화로 버그 감소 및 보일러플레이트 감소 효과

Key Takeaway

레거시 프로젝트 개선은 완벽한 아키텍처 달성이 아닌 Deliver를 중단하지 않으면서 복잡도를 지속적으로 낮추는 과정이다.