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

배경

재택근무 중 진행하던 React Native 프로젝트의 Android 빌드가 점점 느려지고 있었다. 특히 저사양 디바이스에서 초기 로딩이 5초 이상 걸리는 문제가 발생했다.

React Native 0.63부터 Hermes가 정식 지원된다는 소식을 듣고 적용을 결정했다.

적용 과정

android/app/build.gradle 파일 수정:

project.ext.react = [
    enableHermes: true
]

기존 빌드 클린 후 재빌드:

cd android
./gradlew clean
cd ..
npx react-native run-android

문제 해결

1. Proxy 객체 미지원

일부 라이브러리에서 Proxy를 사용하는 부분이 있었다. Hermes는 아직 Proxy를 지원하지 않아 해당 부분을 리팩토링해야 했다.

2. Intl API 누락

날짜 포맷팅에 사용하던 Intl API가 Hermes에서 동작하지 않았다. date-fns로 교체해서 해결했다.

// Before
const formatted = new Intl.DateTimeFormat('ko-KR').format(date);

// After
import { format } from 'date-fns';
const formatted = format(date, 'yyyy-MM-dd');

결과

• APK 크기: 28MB → 25MB (약 11% 감소)
• 초기 로딩 시간: 5.2초 → 2.8초 (약 46% 개선)
• 메모리 사용량: 평균 30% 감소

저사양 디바이스에서의 체감 성능이 확연히 개선되었다. iOS는 기존 JSC를 그대로 사용 중이며, 추후 양쪽 플랫폼의 성능 차이를 모니터링할 예정이다.

참고

• Hermes는 아직 일부 ES6+ 기능이 누락되어 있다
• 프로덕션 적용 전 충분한 테스트가 필요하다
• Chrome DevTools 대신 Flipper를 사용하는 것을 권장한다