프론트엔드
리액트 네이티브로 13년 된 네이티브 앱 전환하기
두줄요약
13년 된 네이티브 앱에 React Native를 도입해 탐색·결제 경험을 앱으로 통합했습니다. 네이티브 브릿지와 메모리 관리의 난점을 해결하며 생산성과 협업 속도를 높였습니다.
문제 상황
- 웹의 콘텐츠 탐색·결제와 앱의 뷰어 경험 분리로 인한 비완결적 서비스 경험
- 빠르게 변하는 탐색 기능 요구에 기존 플랫폼별 개발 환경의 대응 한계
선택 이유
- 활성화된 커뮤니티와 풍부한 도입 사례를 갖춘 React Native 선택
- 프론트엔드·네이티브 개발자가 빠르게 함께 시도할 수 있는 크로스 플랫폼 기반
- 최종적인 전환과 핸들링 용이성을 고려한 React Native 기반 위 네이티브 화면 탑재
구조와 흐름
- 신규 화면은 React Native로 구현하고 기존 화면·콘텐츠 뷰어는 네이티브 유지
- 공통 탭바를 React Navigation으로 통합하고 네이티브 UIView·View를 커스텀 UI 컴포넌트로 래핑
- Swift·Kotlin 브릿지와 TypeScript 타입 정의로 네이티브 모듈·이벤트 연동
성능/운영 포인트
- 뷰어가 React Native 화면을 덮을 때 렌더링 리소스·애니메이션 타이머가 남아 발생한 메모리 점유 관리
- 화면 비노출 시 타이머 소멸 이벤트 추가와 저사양 기기 메모리 지속 점검
- 핫 리로드, 단일 코드베이스, CodePush를 통한 빠른 피드백·A/B 테스트·요구사항 반영
