Builder.shin

React Native 0.71 업그레이드 후 Hermes 엔진 성능 개선 확인

배경

회사 쇼핑몰 앱이 0.68 버전에 머물러 있었는데, 최근 사용자들의 초기 로딩 불만이 증가하면서 업그레이드를 결정했다. 0.71 버전에서 Hermes 엔진이 기본으로 활성화되고 여러 최적화가 들어갔다는 릴리즈 노트를 보고 진행했다.

업그레이드 과정

주요 변경 사항은 다음과 같았다:

  1. Hermes 기본 활성화: iOS도 이제 기본으로 Hermes를 사용
  2. Flexbox Gap 지원: 레이아웃 코드 개선 가능
  3. TypeScript 기본 템플릿: 새 프로젝트 기준

가장 시간이 걸린 부분은 네이티브 모듈 의존성이었다. react-native-fast-image와 react-native-video 라이브러리가 호환되지 않아 최신 버전으로 함께 올려야 했다.

npx react-native upgrade

자동 업그레이드 도구를 사용했지만, android/build.gradle과 Podfile은 수동으로 머지했다.

성능 측정

업그레이드 전후 메트릭스:

  • 앱 시작 시간: 2.8초 → 2.1초 (Android)
  • JS 번들 로딩: 1.5초 → 0.9초
  • 메모리 사용량: 평균 15% 감소

Android Studio Profiler로 측정했고, 특히 저사양 기기(Galaxy A 시리즈)에서 체감이 컸다.

Hermes 디버깅 변화

Chrome DevTools 대신 Flipper를 통한 디버깅이 표준이 되었다. 처음엔 불편했지만, Hermes Debugger가 네이티브 스택 트레이스를 잘 보여줘서 크래시 추적이 수월해졌다.

// Hermes 전용 최적화
if (global.HermesInternal) {
  // Hermes specific optimizations
  console.log('Running on Hermes');
}

회고

메이저 버전 업그레이드는 항상 부담스럽지만, 이번엔 성능 개선 효과가 명확해서 만족스러웠다. 다만 iOS 빌드 시간이 늘어난 점은 아쉬웠다. M1 맥북으로 교체하면서 어느 정도 상쇄되긴 했다.

다음엔 New Architecture(Fabric)를 테스트해볼 예정이다. 아직 프로덕션 준비는 안 됐다고 하지만, 별도 브랜치에서 실험해보려 한다.