안녕하세요~~~ 🥹🥹 React Native의 새로운 아키텍처에 대해 아시나요? 이번 주제는 React Native 새로운 아키텍처 입니다. 이 주제는 8챕터로 예상하고 있고, 8챕터 같이 잘 마무리 하여 React Native에 대해 조금은 심층적으로 알아가는 시간이 되었으면 좋겠습니다!! 🤩
제가 작년에 구 아키텍처에 대해 포스팅을 했었는데요, 오늘은 구 아키텍쳐를 복습할 겸 간단하게 한번 더 짚어보고, 새로운 아키텍처가 나온 배경 및 간단한 흐름까지 간단하게만(?) 알아보겠습니다. (오늘은 일단 가벼운 입문 느낌...!)
React Native 구 아키텍처 요약
React Native가 현재 0.79 버전까지 출시되었습니다. 0.67 버전까지는 구 아키텍처를 기반으로 동작했는데요, 먼저 구 아키텍처가 어떻게 작동했는지 간단하게 알아봅시다! 😎😎
기존 아키텍처에서는 React Native와 Native 간의 통신이 브릿지를 통해 이루어졌습니다. 이 브릿지는 JSON을 기반으로 데이터를 주고받는 구조입니다. React Native에서 Native 기능을 호출할 때, 해당 명령을 JSON 형식으로 직렬화하여 Native로 전송하고, Native는 이 요청을 처리한 뒤 결과를 다시 JSON으로 직렬화해 React Native에 응답합니다. JSON은 단순성과 가독성 때문에 선택되었지만, 가벼운 형식임에도 불구하고 비용이 발생합니다.
React Native → Native: 명령을 JSON으로 직렬화해서 보냄
Native → React Native: 결과를 JSON으로 직렬화해서 보내고, React Native 쪽에서 역직렬화하여 사용
React Native는 기본적으로 JavaScript 기반으로 동작하기 때문에, Native를 거쳐 다시 React Native로 돌아오는 구조는 피할 수 없습니다. 하지만 호출해야 할 명령이 많아질수록, 매번 수행되는 직렬화와 역직렬화 작업은 점점 더 큰 성능 비용을 초래하게 됩니다. 특히 Native 측에 요청해야 할 작업이 많아지면, 브릿지에서 병목현상이 발생해 UI가 멈추거나 지연되는 등 예기치 못한 사용자 경험 저하로 이어질 수 있습니다.
그렇다면...!!
👶🏻 : 직렬화 및 역직렬화 없이 React Native에서 바로 Native의 기능을 요청할 순 없을까?
바로 그 해답으로...!! 메타(Meta)에서는 React Native 0.68 버전부터 새로운 아키텍처(New Architecture) 를 공식적으로 도입하게 됩니다. +_+ (박수 짝짝 👏👏)
메타(Meta)는 기존 아키텍처에서 가장 큰 성능 병목이었던 직렬화 과정을 근본적으로 해결하기로 하였습니다. 새로운 아키텍처에서는 기존의 브릿지 방식을 과감히 제거하고, 직렬화 없이도 Native 기능을 직접 호출할 수 있도록 하는 구조를 도입하였습니다.
👶🏻 : 그렇다면 브릿지의 역할을 어떻게 대신하려는거지?
이 때...! JSI(JavaScript Interface)라는 것이 등장합니다. 🤩 🤩
(JSI?? 아 JSA밖에 모른다고요 ㅋㅋㅋ)
JSI는 기존 브릿지를 대체하기 위해 등장한 새로운 인터페이스로, JSI를 통하면 직렬화 과정 없이 React Native와 Native 간의 통신이 가능해집니다. 하지만 이 JSI 홀로 그 통신 과정을 모두 수행할 수 있는 것은 아닙니다. JSI와 함께 도입된 여러 새로운 구성 요소들이 있는데요, 바로 알아봅시다. 🥹
새로운 아키텍처의 모든 구성 요소
새로운 아키텍처에 도입된 모든 구성 요소를 한번 쓱(SSG)- 살펴보겠습니다!! 😆😆
- Codegen (네이티브 코드 생성기)
- JSI (자바스크립트 인터페이스)
- Hermes Engine (새로운 JS 엔진)
- Turbo 모듈 (JSI 및 네이티브 코드를 사용한 네이티브 모듈)
- Fabric (네이티브 UI 렌더러 / 새로운 렌더 엔진)
- Fabric 렌더러 (새로운 렌더 파이프라인 생성기)
- Yoga (크로스 플랫폼 레이아웃 엔진. 구 아키텍처에도 있었음)
다 너무 중요해서 별표 5개! ⭐️⭐️⭐️⭐️⭐️
새로운 아키텍처의 동작 흐름 (간단한 개요)
React Native 0.68 버전부터는 개발자가 새로운 아키텍처 사용 여부를 직접 선택할 수 있게 되었습니다. 만약 새로운 아키텍처를 활성화한 상태에서, 프로덕션 배포를 위한 Android용 APK 또는 iOS용 IPA 빌드 명령을 실행하면, 새 아키텍처 흐름에 따라 다음 단계들이 수행됩니다.
1단계: 앱 빌드 시간
앱 빌드 시간에 실행되는 주요 구성 요소는 Hermes Engine과 Codegen 입니다.
-
Hermes Engine
먼저, 앱은 앱의 JavaScript 코드가 포함된 바이트코드 파일을 로드하는 것으로 시작합니다.
(*바이트코드: 고급 언어로 작성된 소스 코드를 가상머신이 이해할 수 있는 중간 코드로 컴파일한 것)이 바이트코드 파일은 Android 기기와 iOS 기기에서 실행되는 JavaScript 엔진인 Hermes 에서 직접 실행할 수 있는 더 간단하고 효율적인 코드입니다.
👶🏻 : 빌드 시간에 바이트코드로 변환하면 뭐가 좋은건데?
원래는 앱이 실행될 때 JavaScript 코드를 JavaScript 엔진이 "파싱 → 컴파일 → 실행"하는 과정을 거쳐야 했습니다. 하지만 빌드 타임에 미리 바이트코드로 변환해두면, "파싱 → 컴파일" 과정을 건너뛰고 바로 앱을 실행할 수 있어서 앱 시작 속도가 훨씬 빨라집니다. 빌드 타임에
.js→.hbc(Hermes Bytecode)로 변환되며, 이는 APK/IPA에 포함됩니다.Hermes는 앱 크기, 메모리 사용량, 그리고 앱 시작 시간을 개선합니다.
- Codegen
Codegen은 앱 빌드 시에만 작동하는 자동 코드 생성기로, 빌드 시간 동안 네이티브 코드를 생성합니다. JavaScript와 Native 간의 안전한 연결을 위해 필요한 네이티브 코드를 이 시점에 생성하며, TurboModule이나 Fabric 컴포넌트가 제대로 동작하도록 기반을 마련합니다.
2단계: 앱 런타임
사용자가 앱을 실행하면, 그 이후의 작업은 React Native의 새로운 아키텍처 흐름에 따라 처리됩니다. 앱이 기기에서 실행되는 시점인 런타임 단계에서는 다음과 같은 주요 구성 요소들이 동작하게 됩니다.
런타임의 핵심 구성 요소
-
TurboModule
Turbo Module은 JavaScript에서 액세스할 수 있는 네이티브 모듈을 생성하는 새로운 방식 입니다. Turbo Module은 브릿지를 사용하지 않고 JSI를 사용하여 JavaScript 코드와 통신합니다. 앱의 네이티브 모듈은 이제 Turbo Module을 사용하여 구현됩니다. 네이티브 모듈의 성능과 안정성을 향상시키고 개발 및 유지 관리를 간소화할 수 있습니다. -
Fabric
React Native의 새로운 UI 렌더링 시스템으로, React 컴포넌트를 네이티브 코드로 변환합니다. Fabric은 Yoga 라는 라이브러리를 사용하여 사용자 인터페이스 요소의 레이아웃 (위치, 크기, 정렬 등)을 계산하며, Fabric Renderer를 통해 React reconciliation 결과를 실제 네이티브 뷰에 렌더링 합니다. Fabric은 또한 브릿지 없이 JSI를 사용하여 JavaScript 및 네이티브 코드와 통신하므로, TTI(Time To Interactive)를 향상시키고 네이티브 기능과의 통합을 한층 강화합니다.
하위 구성 요소
이 외에도, 아래와 같은 하위 구성 요소들이 함께 작동합니다.
-
Hermes Engine
JSC를 대신하여 등장한 새로운 JavaScript 엔진으로, 빠른 실행과 낮은 메모리 사용이 강점입니다. -
JSI (JavaScript Interface)
JSI는 브릿지를 대체하여 등장한 구성요소로, JavaScript와 Native 간 직접 통신을 가능하게 해주는 핵심 인터페이스 입니다. JSI는 앱의 성능과 상호 운용성을 향상시키고 브릿지로는 불가능한 새로운 기능을 지원합니다.
새로운 아키텍처의 전반적인 흐름에 대해 훑어보았는데요 👀, 오늘은 미리보기 시간이므로 대략적인 파악만 하시고, '아 이런게 있구나~' 하고 넘어가셔도 좋을 것 같습니다. 앞으로 구성 요소들에 대해 깊게 파헤쳐 보는 시간을 가져볼거거든요~ 😉 (윙꾸) 그럼 다음 포스팅에서는 Codegen에 대해 알아보겠습니다. 다음 포스팅에서 만나요. 👋👋
