[React Native] New Architecture 이해하기 - 3. Hermes

jiveloper·7일 전

Expo react naitve 개념 모음

React Native

목록 보기

18/18

안녕하세요오~~~😆😆 오랜만에 포스팅으로 찾아뵙습니다...! 😅

지난 시간에는 새로운 아키텍처의 구성요소 중 하나인 JSI를 배웠습니다. 제 개인적인 생각으로는 JSI가 새로운 아키텍처의 🌸(꽃)이라고 생각합니다. 그래서 내용도 다소 길었습니다. 😅

오늘은 새로운 아키텍처의 다른 구성요소인, JavaScript 엔진 Hermes에 대해 알아보도록 하겠습니다!! +_+

Hermes 도입 배경

기존 React Native는 JSC(JavaScriptCore)를 기본 JavaScript 엔진으로 사용해 왔습니다. 이 구조에서는 앱 실행 시점에 JavaScript 코드가 해석되고 네이티브 모듈이 초기화되기 때문에, 메모리 사용량이 증가하고 초기 로딩 성능에 한계가 있었습니다. React Native 0.64에서는 위 성능 개선을 목표로 한 새로운 JavaScript 엔진인 Hermes가 도입되었습니다. Hermes가 도입된 이후, React Native 개발자 커뮤니티에서 성능 향상 측면에 대해 큰 지지를 받았습니다.

Hermes 작동 흐름

1. 빌드 타임

새로운 아키텍처의 흐름에 의하면 Hermes는 앱 빌드 타임에 실행되는 주요 구성 요소 중 하나입니다.

기존 JSC 엔진은 런타임에 JavaScript 코드를 실행할 때, "파싱 → 컴파일"하는 과정이 필요했습니다. 이로인해 앱 시작 시 JavaScript 실행 준비 과정에서 지연이 생겨 초기 로딩 성능에 한계가 있었습니다.

이를 해결하기 위해 Hermes는 빌드 타임에 JavaScript 소스 코드를 미리 바이트 코드로 변환합니다. 바이트 코드 파일은 Hermes가 해석하거나 다시 컴파일할 필요 없이 직접 실행할 수 있는 더 간단하고 효율적인 코드 형식입니다. 이 바이트코드는 런타임에 훨씬 더 빠르게 로드될 수 있어, 애플리케이션의 시작 시간을 단축시킵니다.

바이트 코드: 고급 언어로 작성된 소스 코드를 가상머신이 이해할 수 있도록 변환한 중간 코드

빌드 타임에는... Codegen도 열심히 네이티브 모듈을 생성한다는 사실...!
잊지 않으셨죠??! 😆

2. 런타임

앱을 실행하면 미리 생성된 바이트 코드 파일을 로드하는 것부터 시작합니다. 앞서 설명한 것처럼 Hermes는 빌드 타임에 이미 소스 코드를 파싱하고 컴파일해두었기 때문에, 앱 시작 속도가 훨씬 빨라집니다.

Hermes는 이전 시간에 배운 JSI를 사용해 브릿지를 사용하지 않고 네이티브 함수와 객체에 직접 접근 할 수 있습니다. 주로 API를 통해 데이터를 가져오거나 상태를 업데이트하고, 사용자 입력에 응답하는 등 앱의 로직과 데이터, 이벤트 처리를 담당합니다. 또한, 새로운 렌더링 시스템인 Fabric을 사용하여 UI를 업데이트 할 수 있습니다.
(Fabric에 대한 자세한 내용은 다다음 시간에 살펴보겠습니다! 🤩)

Hermes 장점

Hermes는 앱 시작 속도 뿐만 아니라 앱 번들 크기와 메모리 사용량도 최적화합니다. Meta에서는 JSC와 Hermes를 직접 비교했으며, 이 벤치마킹 데이터를 바탕으로 Hermes의 장점을 소개하겠습니다!

1. TTI 단축

TTI(Time to Interactive)는 앱이 실행된 시점부터 사용자가 앱과 상호 작용할 수 있는 시점까지의 시간입니다.
런타임에 JavaScript를 파싱하고 해석하는 것은 느리고 리소스를 많이 소모합니다. Hermes는 빌드 단계에서 JavaScript를 바이트코드로 사전 컴파일하기 때문에 TTI를 단축시켜 원활한 사용자 경험을 제공합니다.

2. 메모리 사용률 감소

메모리 사용량은 앱을 실행할 때 사용되는 메모리 크기입니다.
Hermes는 모바일 환경에 특별히 설계된 가비지 컬렉터를 사용합니다. 이는 메모리 사용량을 최소화하고 가비지 컬렉션 일시 중지의 영향을 줄이므로, 전통적인 JavaScript 엔진에 비해 모바일 장치의 제약조건에 더 잘 적응합니다.

3. 바이너리 크기 감소

바이너리 크기는 APK(안드로이드) 또는 IPA(iOS) 파일에 포함된 React Native 애플리케이션의 크기입니다.
Hermes 바이트코드 형식은 작게 설계되어 있어, 컴파일된 JavaScript 코드의 크기를 줄여 앱의 바이너리 크기를 줄입니다. 이는 특히 저장 공간이 제한적인 모바일 애플리케이션에서 중요합니다.