본문으로 건너뛰기

"React Native" 태그로 연결된 8개 게시물개의 게시물이 있습니다.

모든 태그 보기

Hermes 엔진이란?

· 약 2분
hyochan
hyochan
organizer

Hermes는 Facebook에서 개발한 오픈 소스 JavaScript 엔진으로, 특히 React Native 앱의 시작 시간을 개선하기 위해 설계되었습니다. 2019년 React Native 0.60.4에서 처음 도입되었습니다.

리액트 네이티브 앱은 대게 JavaScript를 사용하여 작성되며, 이 코드는 장치에서 실행되기 전에 JavaScript 엔진을 통해 해석됩니다. 이전에는 대부분의 리액트 네이티브 앱들이 JSC (JavaScriptCore)를 사용하여 코드를 해석했습니다. 하지만 Facebook은 특히 모바일 앱에서의 성능 향상을 목표로 Hermes를 도입했습니다.

Hermes의 주요 특징과 장점은 다음과 같습니다:

  1. 빠른 시작 시간: Hermes는 바이트코드로 컴파일된 JavaScript를 직접 실행하므로 앱의 시작 시간이 향상됩니다.
  2. 낮은 메모리 사용량: Hermes는 메모리 사용량을 최소화하는 설계로 되어 있어, 앱의 전반적인 메모리 소비량을 줄일 수 있습니다.
  3. Optimized for React Native: Hermes는 리액트 네이티브와 함께 사용하기 위해 최적화되어 있어, 일반적인 리액트 네이티브 작업들에 대한 성능 향상을 기대할 수 있습니다.

더 알아보고 싶으시면 Hermes 엔진이란? 블로그를 확인해보세요.

리엑트 네이티브 리아키텍쳐

· 약 3분
hyochan
hyochan
organizer

React Native Architecture는 React Native 애플리케이션의 내부 구조와 동작 원리를 설명하는 용어입니다. React Native의 초기 아키텍처는 몇 가지 주요 구성 요소로 구성되었으며, 시간이 지나면서 개선과 업데이트가 이루어져 애플리케이션의 성능과 안정성을 향상시켰습니다. 2021년까지의 정보를 기반으로 설명하겠습니다.

  1. Bridge: React Native의 초기 아키텍처의 핵심 요소였습니다. Bridge는 JavaScript 스레드와 Native 스레드 간의 통신을 가능하게 했습니다. JavaScript에서 생성된 UI 업데이트, 이벤트 등을 Native 코드로 전송하는 역할을 합니다.

  2. JavaScript Core (JSC): iOS에서 사용되는 JavaScript 엔진입니다. Android에서는 JSC를 포함하여 번들에 포함시켜 배포합니다.

  3. Native Modules: React Native 애플리케이션에서 기기의 Native 기능에 접근할 수 있게 해주는 모듈입니다. 예를 들면, 카메라, GPS, 파일 시스템에 접근할 수 있습니다.

그러나 Facebook은 React Native의 성능과 유연성을 향상시키기 위해 아키텍처를 계속 개선하고 있습니다. "Fabric" 및 "TurboModules"와 같은 새로운 아키텍처 업데이트가 도입되었습니다.

  • Fabric: React Native의 UI 레이어를 재작성하는 프로젝트입니다. 이를 통해 더 빠른 UI 업데이트와 더 부드러운 애니메이션을 달성할 수 있습니다. Fabric은 JavaScript와 Native 간의 통신을 최소화하여 성능을 향상시킵니다.

  • TurboModules: Native Modules의 재작성 버전으로, JavaScript 스레드와 Native 스레드 간의 통신 성능을 향상시킵니다.

새로운 아키텍처의 도입은 React Native 애플리케이션의 성능을 향상시키며, Native와의 통합을 더욱 원활하게 만들기 위한 것입니다.

리엑트 네이티브 새로운 아키텍쳐에 대해서 더 자세히 알아보세요.