React Native 0.70의 Hermes 엔진에서 기대할 수 있는 것

당신과 같은 독자는 MUO를 지원하는 데 도움이 됩니다. 귀하가 당사 사이트의 링크를 사용하여 구매할 때 당사는 제휴 수수료를 받을 수 있습니다.

React Native 0.70이 출시되었으며 Hermes는 이 업데이트와 함께 제공되는 새로운 기본 JavaScript 엔진입니다. 다음은 Hermes에서 기대할 수 있는 사항과 React Native 애플리케이션의 성능에 영향을 줄 몇 가지 기능입니다.

헤르메스는 무엇입니까?

Hermes는 JavaScript 코드를 효율적인 바이트코드로 사전 컴파일하고 애플리케이션 메모리 사용량을 줄여 iOS 및 Android 애플리케이션 실행 중에 성능을 최적화하는 오픈 소스 JavaScript 엔진입니다.

MAKEUSEOF 오늘의 비디오

Hermes를 지원하기 위해 이전 React 네이티브 버전 업데이트

0.70에서 실행되는 React Native 애플리케이션은 기본적으로 Hermes가 활성화됩니다. 이전 React Native 애플리케이션의 경우 Hermes 빌드는 Android 빌드의 경우 버전 0.60.4, iOS의 경우 버전 0.64.0부터 모든 React Native 버전과 함께 제공됩니다. 일치하는 버전은 React Native 애플리케이션에서 종속성 불일치의 위험을 제거합니다.

이러한 이전 버전의 React Native에서 Hermes를 활성화하려면 Android 및 iOS 애플리케이션 모두에 일부 구성을 추가해야 합니다.

위치를 찾을 수 없음은 무슨 뜻인가요?

Android에서는 안드로이드/앱/빌드.gradle 파일:

project.ext.react = [ 
    entryFile: "index.js", 
    enableHermes: true  // clean and rebuild if changing 
]

iOS에서는 다음과 같이 변경합니다. iOS/팟파일 :

use_react_native!( 
    :path => config[:reactNativePath], 
    :hermes_enabled => true 
)

iOS에서는 설정을 구성한 후 Hermes 포드를 설치해야 합니다.

다음 명령을 실행하여 포드를 설치합니다.

cd ios && pod install

Expo로 Hermes 활성화

Expo를 사용하여 빌드하거나 실행하는 React Native 애플리케이션에 Hermes 엔진을 사용할 수도 있습니다. Expo 라이브러리는 Android의 SDK 버전 42부터 iOS의 SDK 버전 43부터 현재 버전 0.70까지의 Hermes를 지원합니다. Expo Application Services Build를 사용하여 빌드하지 않는 한 독립 실행형 애플리케이션은 Hermes를 실행할 수 없다는 점에 유의하는 것이 중요합니다.

React Native 애플리케이션에서 Hermes를 활성화하려면 앱.json 파일:

{ 
  "expo": { 
    "jsEngine": "hermes" 
  } 
}

이제 Expo Application Services로 빌드된 애플리케이션은 JavaScript 엔진으로 Hermes가 활성화됩니다.

React Native 앱을 위한 Hermes 성능 최적화

대부분의 JavaScript 엔진은 JIT(Just in Time) 컴파일 시스템을 사용하여 모든 JavaScript 소스 코드를 구문 분석합니다. 장치가 전체 컴파일 프로세스가 완료될 때까지 기다려야 하기 때문에 JIT 시스템은 실행 속도를 늦춥니다. Hermes는 AOT(Ahead-of-Time Compilation) 접근 방식을 사용하여 대부분의 무거운 JavaScript 엔진 작업을 빌드 시간으로 전송합니다.

Hermes는 주로 애플리케이션 TTI(Time to Interactive), 바이너리 크기 및 메모리 사용량과 같은 애플리케이션 성능의 세 가지 메트릭에 영향을 미칩니다.

인터랙티브 시간

TTI는 앱이 스크롤 또는 입력과 같은 사용자 상호 작용을 로드하고 지원하는 데 걸리는 시간입니다. Hermes는 다른 JavaScript 엔진에 비해 React Native 애플리케이션의 평균 TTI를 개선합니다.

이러한 TTI 감소는 Hermes가 JIT 컴파일러를 실행하지 않기 때문입니다.

바이너리 크기

바이너리 크기는 번들로 제공되는 React Native 애플리케이션의 크기입니다. Android 애플리케이션은 다음을 사용합니다. APK 파일 형식 , iOS 앱은 Apple이 IPA라고 부르는 형식을 사용합니다. Hermes를 사용하면 Android 기기에서 애플리케이션 크기가 크게 줄어듭니다.

초보자를 위한 무료 온라인 프로그래밍 과정

메모리 사용량

메모리 사용량은 애플리케이션에서 최적화하기 위한 또 다른 중요한 지표입니다. 너무 많은 메모리를 사용하는 경우 응용 프로그램의 사용자 경험이 부정적인 영향을 받습니다. Hermes는 요청 시 메모리 사용량을 조절하는 Garbage Collector 시스템을 구현하여 애플리케이션이 실행되는 동안 필요한 메모리 공간만 사용하도록 합니다.

Hermes 및 Chrome DevTools로 React Native 디버깅

Hermes는 Expo를 사용하여 에뮬레이터, 시뮬레이터 또는 물리적 장치에서 실행되는 React Native 애플리케이션을 디버깅하기 위한 새로운 경험을 제공합니다. Hermes는 Chrome DevTools의 Inspector Protocol을 사용하여 React Native 애플리케이션 디버깅을 지원합니다. 이것을 전통적인 것과 혼동해서는 안됩니다. 브라우저 콘솔을 사용한 자바스크립트 디버깅 .

Hermes 애플리케이션을 디버그하도록 Chrome을 구성하려면 다음 단계를 따르세요.

로 이동 chrome://inspect 크롬 브라우저 내부.
클릭 구성 단추.
화면 모달 내에서 React Native 애플리케이션을 실행하는 메트로 번들러의 서버 주소를 입력하고 완료 .

이제 Hermes 대상 검사 링크를 사용하여 React Native 애플리케이션을 디버그할 수 있습니다.

Hermes가 React Native에만 최적화된 이유

React Native JavaScript 엔진으로서 Hermes의 최적 성능은 부분적으로 런타임 환경에 달려 있습니다. React Native에서는 애플리케이션 환경 내의 모든 JavaScript 코드를 번들로 제공합니다. 이 시스템은 배송 바이트 코드를 효율적으로 만듭니다.

고려해야 할 또 다른 요소는 JavaScript 컴파일 중에 수행되는 작업의 양입니다. Hermes는 공격적인 바이트코드 최적화를 피하면서 모바일 애플리케이션에서 예상되는 빈번한 사용자 상호 작용을 관리합니다. JIT 컴파일러 JavaScript 엔진은 이러한 방식으로 작업을 수행하지 않습니다.