React Native
아키텍처 개요
React Native는 브리지(Bridge) 아키텍처를 기반으로 작동합니다. 세 개의 주요 스레드가 있습니다:
JavaScript 스레드
- React 컴포넌트 로직과 비즈니스 로직이 실행되는 곳
- JavaScriptCore 엔진에서 실행 (iOS는 내장, Android는 번들링)
- Virtual DOM과 상태 관리가 이곳에서 처리
네이티브 UI 스레드 (메인 스레드)
- 실제 네이티브 UI 렌더링과 사용자 인터랙션 처리
- iOS의 UIKit, Android의 View 시스템 사용
- 60fps 성능 유지를 위해 독립적으로 작동
브리지 (Bridge)
- JavaScript와 네이티브 코드 간의 비동기 통신 채널
- JSON 메시지를 통해 데이터 전달
- 배치 처리로 성능 최적화
렌더링 과정
- 컴포넌트 렌더링: JavaScript에서 React 컴포넌트가 렌더링되어 Virtual DOM 생성
- 레이아웃 계산: Yoga 레이아웃 엔진이 Flexbox 기반으로 레이아웃 계산
- 네이티브 명령 생성: 브리지를 통해 네이티브 UI 생성/업데이트 명령 전달
- 네이티브 렌더링: 실제 네이티브 컴포넌트로 화면에 표시
새로운 아키텍처 (Fabric & TurboModules)
React Native는 새로운 아키텍처로 진화하고 있습니다:
Fabric (새로운 렌더러)
- 브리지 대신 JavaScript Interface (JSI) 사용
- 동기적 통신으로 성능 향상
- 우선순위 기반 렌더링
TurboModules
- 네이티브 모듈의 지연 로딩
- 타입 안정성 향상
- 더 나은 성능과 메모리 효율성
한결