React Native에서 0.70버전부터 Hermes를 기본 자바스크립은 엔진으로 제공한다고 한다.

그럼 Hermes는 뭐고 이 전에 쓰던 자바스크립트 엔진은 무엇일까?

​

Hermes란?

hermes는 Facebook에서 발명한 javascript 엔진이다

Hermes는 AOT(Ahead-Of-Time) 컴파일러를 사용하여 앱의 시작 시간이 더 빠르다. 또한 메모리 사용량을 낮춰 JIT컴파일 같은 부가적인 오버헤드가 없다

React Native 공식 페이지에 따르면 Hermes를 쓰게되면 빠른 시작, 낮은 메모리 외에도 앱의 크기 또한 줄일 수 있다고한다.

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

​

Hermes이전 JavascriptCore란?

React Native는 Hermes이전에는 JavascriptCore를 자바스크립트 엔진으로 사용했다.

JavascriptCore란 Apple에서 개발한 오픈 소스 JavaScript 엔진으로(safari),
JIT(Just-In-Time) 컴파일러를 사용하여 런타임 성능이 뛰어나다.
그러나 JIT 컴파일러는 애플리케이션 시작 시간을 늦추고, 메모리 사용량이 Hermes보다 크다

단 iOS에서는 JavascriptCore도 보안과 안정성 때문에 JIT가 아닌 AOT컴파일을 사용한다. (JIT는 실행 시점에 컴파일 하기 때문에 악성코드가 주입될 수 있다.)

JIT(Ahead-Of-Time) 컴파일러란?
JIT 컴파일러(Just-In-Time Compiler)는 프로그램 실행 중에 코드를 변환하는 컴파일러를 말한다. 일반적으로 코드는 컴파일러에 의해 변환된 후 실행되지만 JIT 컴파일러는 프로그램 실행 중에 기계어로 변환하는 것입니다.

​

Javascript와 Hermes 비교

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

다만 Hermes를 사용하기 위해서는 AOS는 0.60.4버전 이상 iOS는 0.64버전 이상이어야 한다.

​

Hermes 사용하기

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

android

android/app/build.gradle에서

project.ext.react = [
    enableHermes: false,  
]

or
android/app/gradle.properties에서

hermesEnabled=false

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

iOS

ios/podfile

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

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

hermes 확인하기

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