React Native 0.70 업그레이드 후 Hermes 엔진 적용기

배경

사내 React Native 앱이 0.66 버전에서 멈춰있었다. 0.70이 stable로 나온 지 2개월 정도 지나서 업그레이드를 진행했다. 이번 버전부터 iOS도 Hermes가 기본 엔진이 되어서 함께 적용했다.

주요 변경사항

Android Hermes 활성화

기존에는 android/app/build.gradle에서 설정했는데, 0.70부터는 gradle.properties에서 관리한다.

hermesEnabled=true

iOS Hermes 적용

iOS는 Podfile에서 설정을 제거하면 자동으로 Hermes가 적용된다.

# 기존 JSC 사용 설정 제거
# :hermes_enabled => true # 이제 기본값

발생한 문제들

1. Intl API 이슈

Hermes는 Intl polyfill이 필요하다. Date.toLocaleString() 사용하는 부분에서 런타임 에러가 발생했다.

// index.js 최상단에 추가
import '@formatjs/intl-getcanonicallocales/polyfill';
import '@formatjs/intl-locale/polyfill';
import '@formatjs/intl-pluralrules/polyfill';

2. Proxy 객체 동작 차이

MobX를 사용하는 부분에서 Proxy 객체 동작이 JSC와 약간 달랐다. observable 객체를 직접 비교하는 로직을 수정했다.

// Before
if (storeA === storeB) { ... }

// After
if (toJS(storeA) === toJS(storeB)) { ... }

3. Flipper 충돌

Hermes와 Flipper 버전 호환 문제가 있어서 Flipper를 최신 버전으로 업데이트했다.

성과

• Android APK 크기: 42MB → 38MB (약 10% 감소)
• iOS 앱 시작 시간: 약 15% 단축
• JavaScript 실행 속도: 체감상 개선

결론

Hermes 마이그레이션은 생각보다 순조로웠다. Intl polyfill만 제대로 추가하면 대부분의 앱에서 큰 문제 없이 적용 가능할 것으로 보인다. 성능 개선 효과가 명확해서 만족스러웠다.