1️⃣ React Native의 기본 동작 원리

React Native는 JavaScript 런타임과 네이티브 브릿지를 통해 동작한다.

1-1) JavaScript 런타임

• React Native는 모바일 앱의 비즈니스 로직과 UI 정의를 JavaScript에서 작성합니다.
• 앱 로직이 JavaScript 런타임에서 실행되며, 이를 네이티브 코드(Android, iOS)에 전달합니다.
• JavaScript 엔진 : JavaScriptCore에서 Hermes로
  • 초기 React Native는 JavaScriptCore를 기본 JavaScript 엔진으로 사용했습니다. 그러나 모바일 환경의 성능 제한으로 인해 Meta에서 Hermes 엔진을 개발했습니다.
  • Hermes는 React Native에 최적화된 오픈소스 JavaScript 엔진입니다. 많은 앱에서 Hermes를 사용하면 JavaScriptCore에 비해 시작 시간이 개선되고 메모리 사용량이 감소하며 앱 크기가 작아집니다. Hermes는 React Native에서 기본적으로 사용되며 이를 활성화하기 위한 추가 구성이 필요하지 않습니다.

1-2) 브릿지(Bridge)

• React Native는 JavaScript 코드와 네이티브 코드 간의 통신을 담당하는 브릿지를 사용합니다.
• JavaScript와 네이티브 간의 비동기 메시지 교환으로 동작합니다.
  • 예: JavaScript에서 Button 클릭 이벤트를 처리하고, 네이티브에서 이를 화면에 반영.

1-3) 네이티브 렌더링

• React Native는 네이티브 컴포넌트를 사용하여 화면을 렌더링합니다. 이로 인해 네이티브 수준의 퍼포먼스를 유지할 수 있습니다.

궁금증💭 : 컴포넌트가 매핑될 때 왜 UIKit과 Android View 시스템을 사용❓

React Native의 컴포넌트는 UIKit과 Android View 시스템에 직접 매핑된다.