[React Native] Hermes engine이란?

 

 

 

 

 

 

React Native를 개발하다 보면, hermes engine이라는 단어가 많이 보인다.

그래서 hermes engine이 뭘까??

 

 

공식 문서

https://reactnative.dev/docs/hermes

Using Hermes · React Native

 

 

Hermes란?

hermes는 Facebook에서 개발한 오픈소스 javascript 엔진이다.

헤르메스 엔진의 주요 특징은 다음과 같다.

• 인라인 캐싱: 자주 사용되는 JavaScript 코드를 캐시 하여 실행 속도를 높인다.
• JIT 컴파일: 런타임에 자바스크립트 코드를 기계 코드로 변환하여 성능을 향상시킨다.
• AOT 컴파일: 앱 빌드 타임에 자바스크립트 코드를 바이트 코드로 변환하여 앱 시작 속도를 높인다.
• Hermes Bytecode: 자바스크립트 코드를 효율적으로 표현하기 위한 맞춤형 바이트코드 형식을 사용한다.

 

* AOT(Ahead-Of-Time) 컴파일러란?

AOT 컴파일러(Ahead-Of-Time Compiler)는 프로그램을 실행 전 코드를 미리 변환하는 컴파일러를 말한다.

 

 

Javascript와 Hermes 비교

Gemini가 정리해 준 기존 엔진과의 비교는 다음과 같다.

 

공식 사이트에서는 Hermes를 jsc와 비교했을 때 시작시간 개선, 메모리 사용량 축소, 앱 크기 축소를 이유로 react native에 가장 최적화된 자바스크립트 엔진이라고 한다.

 

헤르메스 엔진의 핵심 장점은 다음과 같다.

• 빠른 앱 시작: 빌드 타임에 자바스크립트를 효율적인 바이트코드로 사전 컴파일하여 앱 시작 속도를 높인다.
• 메모리 사용량 감소: 혁신적인 메모리 관리 기술을 통해 기존 엔진 대비 메모리 사용량을 최대 50%까지 줄인다.
• 앱 크기 축소: JavaScript 코드를 효율적으로 압축하여 앱 크기를 최대 40%까지 줄인다.

 

728x90

 

 

Hermes 사용하기

0.70 버전부터는 Hermes가 기본이기 때문에 따로 설정할 것은 없다. 이하 버전에서는 별도의 설정을 해야 하지만 굉장히 간단하기 때문에 쉽게 할 수 있다.

0.70 버전 이하의 프로젝트에서 헤르메스 엔진을 사용하기 위해서는 다음 버전 이상의 React Native 버전이 필요하다. 다만 iOS는 0.64 버전부터 기본 JavaScript 엔진으로 자동 적용된다.

• Android: 0.60.4 버전 이상
• iOS: 0.64 버전 이상

안정적인 사용을 위해서는 0.64 버전 이상을 사용할 것을 권장하고 있다.

 

 

android

 

android/gradle.properties 에서 다음 코드를 추가한다.

hermesEnabled=true

 

해당 값들을 true로 하면 hermes를, false면 JavascriptCore를 사용한다.

 

 

만약 ProGuard를 사용한다면 다음 설정도 진행해 준다.

// proguard-rules.pro
-keep class com.facebook.hermes.unicode.** { *; }
-keep class com.facebook.jni.** { *; }

 

 

모든 과정이 완료되면 빌드를 clean 시켜준다.

$ cd android && ./gradlew clean

 

 

 

iOS

 

ios/podfile 에 다음 코드를 추가한다.

 use_react_native!(
    // :hermes_enabled => flags[:hermes_enabled], <- 기본설정
    :hermes_enabled => true,
 )

 

 

설정 후 ios 디렉토리에서 pod install을 다시 해준다.

 

 

Hermes 사용 중인지 확인하기

Hermes가 사용 중인지 확인하는 데 사용할 수 있는 전역 변수를 JavaScript에서 사용할 수 있다.

const isHermes = () => !!global.HermesInternal;