Hermes 엔진 — React Native 전용 JavaScript 엔진

Hermes는 Meta가 React Native를 위해 만든 JavaScript 엔진으로, 앱 시작 시간, 메모리 사용량, 바이너리 크기를 최적화합니다.

Hermes vs JSC vs V8

항목	Hermes	JSC (JavaScriptCore)	V8
용도	React Native 전용	Safari/RN (기존)	Chrome/Node.js
AOT 컴파일	바이트코드 프리컴파일	JIT 컴파일	JIT 컴파일
시작 시간	빠름	느림	빠름 (JIT 워밍업 후)
메모리	적음	많음	많음
바이너리 크기	작음	큼	큼

바이트코드 프리컴파일

Hermes의 가장 큰 특징입니다.

PLAINTEXT

기존 (JSC):
앱 시작 → JavaScript 소스 파싱 → AST 생성 → 컴파일 → 실행
                    (런타임에 이 모든 과정이 발생)

Hermes:
빌드 시 → JavaScript → 바이트코드 (.hbc) 변환
앱 시작 → 바이트코드 바로 실행 (파싱/컴파일 불필요!)
                    (앱 시작이 즉시 가능)

실제 성능 차이

PLAINTEXT

Facebook 앱 기준 (Hermes 도입 전후 비교):
- 앱 시작 시간(TTI): 4.3초 → 2.0초 (50%+ 감소)
- 메모리 사용량: 185MB → 136MB (27% 감소)
- APK 크기: 41MB → 22MB (46% 감소)

Hermes 활성화

React Native 0.70+에서는 기본 활성화됩니다.

GRADLE

// android/app/build.gradle
project.ext.react = [
    enableHermes: true  // 기본값
]

RUBY

# ios/Podfile
:hermes_enabled => true  # 기본값

확인 방법

TSX

// Hermes가 활성화되어 있는지 확인
const isHermes = () => !!global.HermesInternal;

function EngineInfo() {
  return (
    <Text>
      엔진: {isHermes() ? 'Hermes' : 'JSC/V8'}
    </Text>
  );
}

Hermes의 제한사항

TSX

// 1. Proxy 지원 (Hermes 0.12+부터 지원)
// MobX, Immer 등 Proxy 기반 라이브러리 사용 가능

// 2. eval() 미지원 — 보안상 의도적으로 비활성화
// eval('1 + 1'); // 에러!

// 3. with 문 미지원
// with (obj) { ... } // 에러!

// 4. Intl API 부분 지원
// 일부 로케일 기능은 polyfill 필요

디버깅

Hermes는 Chrome DevTools 프로토콜을 지원합니다.

BASH

# Hermes 디버거 연결
# Metro 터미널에서 'd' 키 입력 → Chrome DevTools 열림

# 프로파일링
# Chrome DevTools → Performance 탭 → 바이트코드 실행 분석

정리

Hermes는 ** 바이트코드 프리컴파일 **로 앱 시작 시간을 크게 단축합니다
JIT 대신 AOT 컴파일 방식으로 메모리 사용량과 바이너리 크기를 줄입니다
React Native 0.70+에서 ** 기본 활성화 **됩니다
eval()이 비활성화되어 있으므로 동적 코드 실행은 불가합니다
면접에서 "React Native 성능 최적화"를 물으면 Hermes를 첫 번째로 언급하세요