피드로 돌아가기
Dev.toFrontend
원문 읽기
Worklets 통한 JS Bridge 제거로 SwiftUI/Compose 상태 동기화 달성
Control SwiftUI and Compose State Synchronously with Worklets in Expo UI
AI 요약
Context
React Native의 기존 아키텍처는 JavaScript와 Native UI Thread 간의 Bridge 통신으로 인해 비동기 딜레이 발생. 특히 입력 마스킹 같은 실시간 상태 업데이트 시 Round-trip 지연으로 인한 화면 깜빡임 현상이 주요 병목 지점으로 작용함.
Technical Solution
- ObservableState 기반의 SharedObject를 도입하여 Native Code 영역에서 상태를 직접 관리하는 구조 설계
- iOS의 ObservableObject와 Android의 MutableState를 매핑하여 플랫폼별 Native State와 동기화
- 'worklet' 지시어를 통해 콜백 함수를 UI Thread에서 직접 실행함으로써 JS Bridge 경유 단계 제거
- UI Thread 내에서 상태 변경과 렌더링을 동일 프레임 내에서 처리하는 동기적 파이프라인 구축
- SwiftUI의 @State 및 Compose의 mutableStateOf와 동일한 메커니즘을 TypeScript 인터페이스로 추상화
실천 포인트
1. 실시간 입력 포맷팅이나 애니메이션 등 60FPS 유지가 필수적인 UI 인터랙션에 Worklet 적용 검토
2. Native State와 JS State의 이중 관리 비용을 줄이기 위해 SharedObject 기반의 상태 설계 채택
3. UI Thread 직접 제어 시 발생할 수 있는 Thread-safety 및 메모리 누수 가능성 점검