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

배경

운영 중인 React Native 앱의 Android 버전에서 초기 로딩이 느리다는 피드백이 계속 들어왔다. 특히 저사양 기기에서 앱 실행 후 첫 화면이 뜨기까지 3~4초가 걸렸다.

React Native 0.64로 업그레이드하면서 Hermes 엔진 적용을 검토했다. Hermes는 Facebook이 만든 JavaScript 엔진으로, React Native에 최적화되어 있다고 한다.

android/app/build.gradle 파일 수정만으로 간단히 적용할 수 있었다.

project.ext.react = [
    enableHermes: true
]

빌드 후 테스트해보니 초기 로딩 시간이 절반 가까이 줄었다. APK 사이즈도 약간 감소했다.

문제는 일부 라이브러리에서 발생했다. react-native-debugger와 Chrome 디버거가 작동하지 않았다. Hermes는 자체 디버깅 프로토콜을 사용하기 때문이다.

Flippper로 디버깅 환경을 전환해야 했고, 팀원들에게 새로운 디버깅 방식을 공유했다.

또한 Intl API를 사용하는 부분에서 일부 기능이 누락되어 polyfill을 추가해야 했다.

import 'intl';
import 'intl/locale-data/jsonp/ko';

디버깅 환경 변경에 약간의 러닝커브가 있었지만, 성능 개선 효과가 확실해서 프로덕션에 반영했다. iOS는 JavaScriptCore를 그대로 사용하기로 했다.