React Native는 Facebook에서 개발한 오픈 소스 프레임워크로, 하나의 코드베이스로 iOS와 Android와 같은 여러 플랫폼에서 네이티브 애플리케이션을 개발할 수 있게 해줍니다. 리액트 네이티브는 리액트 라이브러리를 기반으로 동작하며, "한 번 작성하면 어디서나 실행된다"는 원칙보다는 "한 번 배우면 어디서나 작성할 수 있다"는 철학을 따릅니다. 아래는 리액트 네이티브의 동작 원리에 대한 자세한 설명입니다.
1. 리액트의 기본 원리 활용
리액트 네이티브는 React와 동일한 핵심 개념(컴포넌트 기반 아키텍처, 상태 관리, Virtual DOM 등)을 사용합니다.
- Virtual DOM: 리액트에서 사용하는 Virtual DOM은 실제 DOM과의 차이를 계산한 후 필요한 변경 사항만 반영합니다. 그러나 리액트 네이티브에서는 브라우저 DOM 대신 네이티브 UI 컴포넌트를 사용하므로, Virtual DOM 대신 Shadow Tree라는 구조를 활용합니다.
- JSX: React Native에서도 JSX 문법을 사용하여 UI를 선언적으로 정의합니다.
2. JavaScript와 네이티브 코드 간 통신
리액트 네이티브는 JavaScript 코드와 네이티브 코드(iOS의 Object-C/Swift, Android의 Java/Kotlin) 간의 상호작용을 통해 동작합니다. 이 상호작용은 브릿지(Bridge)라는 메커니즘을 통해 이루어집니다.
브릿지(Bridge)
- JavaScript와 네이티브 환경 간의 비동신 통신을 담당합니다.
- JavaScript 코드에서 발생한 명령은 브릿지를 통해 네이티브 모듈로 전달되고, 그 결과를 다시 JavaScript 코드로 변환합니다.
- 이 구조 덕분에 리액트 네이티브는 플랫폼 독립적인 UI 개발이 가능하며, 네이티브 성능에 가까운 결과를 제공합니다.
3. 렌더링 과정
리액트 네이티브의 렌더링 과정은 크게 세 가지 주요 스레드(Thread)로 나뉩니다.
1. JavaScript 스레드
- 애플리케이션의 비즈니스 로직 및 React 상태 관리, JSX 렌더링, 애니메이션 처리 등을 담당합니다.
- React 코드는 JavaScriptCore(또는 Hermes 같은 엔진)를 통해 실행됩니다.
2. 네이티브 UI 스레드
- iOS의 UIKit, Android의 View 시스템과 같은 네이티브 UI를 처리합니다.
- React Native에서 작성한 JSX 코드는 네이티브 UI 컴포넌트로 변환되어 실제화면에 표시됩니다.
3. Shadow Tree(또는 Layout) 스레드
- JSX의 레이아웃 정보를 분석하고 스타일을 적용합니다.
- Flexbox 레이아웃을 기반으로 각 컴포넌트의 배치를 계산하며, 결과는 네이티브 UI 스레드로 전달됩니다.
4.플랫폼별 네이티브 컴포넌트 매핑
React Native는 플랫폼 독립적인 JavaScript 코드를 네이티브 컴포넌트로 매핑합니다.
예를 들어,
- <View>: iOS에서는 UIView, Android에서는 View로 매핑됩니다.
- <Text>: iOS에서는 UILabel, Android에서는 TextView로 매핑됩니다.
5. 네이티브 모듈 확장
React Native는 기본적으로 많은 네이티브 기능을 지원하지만, 특정 플랫폼 고유의 기능을 사용하려면 네이티브 모듈을 작성해야 햡니다.
- iOS: Object-C 또는 Swift로 작성
- Android: Java 또는 Kotlin으로 작성
- 작성된 모듈은 브릿지를 통해 JavaScript에서 호출할 수 있습니다.
6. Hermes 엔진(선택적)
- Hermes는 React Native에서 사용할 수 있는 경량 JavaScript 엔진입니다.
- 메모리 사용량과 초기 실행 시간을 줄이기 위해 설계되었으며, 특히 Android에서 성능 향상을 제공합니다.