eatthefrog
리팩토링: React AppNavigation 상태 관리 본문
AppNavigation 컴포넌트는 네비게이션 컨테이너 역할을 하면서 동시에 모달 제어, 화면 체류 시간 추적 등 여러 책임을 가지고 있었다. 이 구조는 점차 복잡도가 높아지고 유지보수가 어려워지는 문제를 만들었다.
베스트 프랙티스
- 상태 + 로직 = 커스텀 훅
UI와 직접 관계 없는 기능은 훅으로 분리해 재사용성과 테스트 용이성을 확보한다. - 컴포넌트는 렌더링에 집중
AppNavigation은 오직 "네비게이션"이라는 단일 책임만 수행하도록 유지한다. - 비즈니스 로직은 서비스/훅 계층으로 이동
네비게이션 레벨에서 복잡한 로직을 제거하면 전체 구조가 훨씬 명확해진다.
'프론트엔드 노트' 카테고리의 다른 글
| React Hooks 단위 테스트 도구 비교 (0) | 2025.12.02 |
|---|---|
| 리엑트 테스트 코드 시작하기 (0) | 2025.12.02 |
| React-Native - Firebase Analytics 도입하기 (0) | 2025.11.19 |
| 리엑트 1000줄 리팩토링 하기 (0) | 2025.11.13 |
| 비동기 프로그래밍 입문: async, Promise, await 쉽게 이해하기 (0) | 2025.11.12 |