2nd/10_Wiki/Topics/Frontend/React Refactoring.md

📌 Brief Summary

React Refactoring은 기존 애플리케이션의 외부 동작을 유지하면서 내부 구조, 가독성, 모듈성을 현대적 표준에 맞게 개선하는 작업이다. 클래스형 컴포넌트의 현대화, 비대한 컴포넌트의 분리, 최신 상태 관리 스택(Zustand, Query) 도입을 통해 기술 부채를 상환하고 확장 가능한 시스템으로 진화시키는 것을 목표로 한다.

📖 Core Content

1. 안전망 확보 (Testing First)
   • 리팩토링 전 기능 깨짐을 방지하기 위해 단위 테스트와 UI 테스트 수트를 먼저 구축한다.
2. 현대적 패러다임 마이그레이션
   • 클래스 컴포넌트를 함수형 컴포넌트와 훅으로 전환하고, 불필요한 useEffect를 제거한다.
   • JavaScript 코드를 TypeScript로 점진적으로 전환하여 정적 안정성을 확보한다.
3. 커스텀 훅을 통한 로직 분리 (SRP)
   • 300줄 이상의 컴포넌트에서 비즈니스 로직(데이터 패칭, 폼 처리 등)을 추출하여 커스텀 훅으로 캡슐화한다.
4. 상태 관리 최신화
   • 무거운 단일 스토어(Redux 등)를 걷어내고 서버 상태(TanStack Query)와 클라이언트 전역 상태(Zustand/Context)로 분리한다.
5. 점진적 마이그레이션 전략
   • 전체 재작성보다는 "Refactor, do not rewrite" 철학을 바탕으로 기능 단위의 단계적 전환을 수행한다.

⚖️ Trade-offs & Caveats

• 일시적 코드 중복: 마이그레이션 과도기에는 구형 로직과 신규 로직이 공존하여 코드베이스가 일시적으로 지저분해질 수 있다.
• 성능 회귀 위험: 클래스 생명주기를 useEffect로 옮기는 과정에서 의도치 않은 무한 루프나 불필요한 렌더링이 발생할 수 있으므로 면밀한 검증이 필요하다.
• 리팩토링 비용: 당장의 기능 개발보다 시간이 많이 소요될 수 있으므로, 비즈니스 가치와 우선순위를 고려한 리팩토링 범위 설정이 중요하다.

🔗 Knowledge Connections

Related Concepts (Auto-Linked)

• Custom_Hooks
• Frontend
• JavaScript
• Legacy System Migration
• Observability
• Principles
• React
• Redux
• Refactoring
• Research
• SOLID_Principles
• Testing
• _system

Related Concepts

• Custom Hooks: 로직 분리의 핵심 단위 (관계: 실천 도구)
• SOLID Principles: 구조 개선의 설계 기준 (관계: 이론적 근거)
• TanStack Query: 서버 상태 관리에 최적화된 리팩토링 대상 (관계: 주요 마이그레이션 스택)

Deeper Research Questions

1. 대규모 리팩토링 시 신/구 상태 관리 시스템 간의 데이터 동기화를 유지하기 위한 'Adapter' 패턴의 적용 방안은?
2. useEffect를 제거하고 상태 업데이트 로직을 이벤트 핸들러나 훅 내부로 옮길 때 발생하는 동기화 시점 차이 문제 해결법은?
3. FSD 아키텍처로 리팩토링 시, 기존에 얽혀있던 교차 관심사(Cross-cutting concerns)를 어떻게 안전하게 분리할 것인가?
4. 리팩토링 과정에서 발생하는 'Breaking Changes'를 팀원들에게 공유하고 코드 일관성을 유지하기 위한 자동화된 문서화 방안은?
5. TypeScript 전환 시 'Any' 타입을 점진적으로 제거하기 위한 정적 분석 도구 활용 전략은?

Practical Application Contexts

• 레거시 React 앱 현대화: 오래된 클래스 컴포넌트 기반 프로젝트를 최신 훅 및 상태 관리 체계로 개선.
• 성능 및 유지보수성 강화: 복잡하게 얽힌 컴포넌트들을 SRP 원칙에 따라 작고 명확한 단위로 분해.

Adjacent Topics

• Legacy System Migration
• Clean Code & Refactoring Patterns
• Frontend Observability