eatthefrog

리팩토링: React AppNavigation 상태 관리 본문

프론트엔드 노트

리팩토링: React AppNavigation 상태 관리

eater_forg 2025. 11. 25. 16:04

AppNavigation 컴포넌트는 네비게이션 컨테이너 역할을 하면서 동시에 모달 제어, 화면 체류 시간 추적 등 여러 책임을 가지고 있었다. 이 구조는 점차 복잡도가 높아지고 유지보수가 어려워지는 문제를 만들었다.

베스트 프랙티스

  • 상태 + 로직 = 커스텀 훅
    UI와 직접 관계 없는 기능은 훅으로 분리해 재사용성과 테스트 용이성을 확보한다.
  • 컴포넌트는 렌더링에 집중
    AppNavigation은 오직 "네비게이션"이라는 단일 책임만 수행하도록 유지한다.
  • 비즈니스 로직은 서비스/훅 계층으로 이동
    네비게이션 레벨에서 복잡한 로직을 제거하면 전체 구조가 훨씬 명확해진다.