Builder.shin

React Native 0.61에서 Hermes 엔진 적용 후기

문제 상황

운영 중인 React Native 앱의 Android 버전에서 초기 로딩 시간이 4초 이상 소요되는 문제가 있었다. 특히 저사양 기기에서 더 심각했다.

Hermes 엔진 적용

React Native 0.61부터 공식 지원하는 Hermes 엔진을 적용하기로 했다. android/app/build.gradle에서 한 줄만 수정하면 된다.

project.ext.react = [
    enableHermes: true
]

빌드 후 APK 사이즈를 확인해보니 기존 23MB에서 18MB로 감소했다. 바이트코드로 미리 컴파일되기 때문에 앱 시작 시 JS 파싱 시간이 줄어든 것이다.

성능 측정 결과

  • 초기 구동 시간: 4.2초 → 2.1초 (50% 개선)
  • 메모리 사용량: 평균 30MB 감소
  • TTI(Time to Interactive): 5.8초 → 3.2초

주의사항

몇 가지 문제가 있었다.

  1. 디버깅 불편: Chrome DevTools를 사용할 수 없다. Flipper를 사용해야 한다.
  2. 라이브러리 호환성: react-native-firebase의 일부 기능에서 warning이 발생했다. 최신 버전으로 업데이트해서 해결했다.
  3. Proxy 미지원: ES6 Proxy를 사용하는 MobX에서 문제가 있을 수 있다. 우리는 Redux를 쓰고 있어서 문제없었다.
// Hermes 사용 여부 확인
const isHermes = () => global.HermesInternal != null;
console.log('Using Hermes:', isHermes());

결론

Android 성능이 눈에 띄게 개선되었다. 아직 실험적인 기능이라 production 적용은 신중해야 하지만, 충분히 검증 후 배포할 예정이다. iOS는 JavaScriptCore 성능이 괜찮아서 당분간 적용하지 않기로 했다.