우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다

FECONF 2026에서 진행한 우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다의 Speaker Deck입니다.

Transcript

1. 우리의 Nitro Modules는 당신의 Turbo Modules보다 아름답다 HyunWoo Lee Android Developer, AppsInToss Foundation Team@Toss
2. 동작 원리 JavaScript 호출은 어떻게 네이티브까지 이어질까? JavaScript Native CalculatorModule .add(1, 2) 3 ? Swift / Kotlin
3. 동작 원리 JavaScript과 C++ 런타임을 잇는 JSI(JavaScriptInterface) Hermes(JavaScript Runtime) JSI HostObject/HostFunction
4. 동작 원리 React Native 내부에서 네이티브 모듈 탐색 JavaScript C / HostObject TurboModuleRegistry .getEnforcing('CalculatorModule') BridgelessNativeModuleProxy ::get(runtime, ‘CalculatorModuleʼ) requireModule(‘CalculatorModule’) turboBinding_.getModule( runtime, ‘CalculatorModule’) TurboModule이 없고 legacyBinding_이 있으면 NativeModules[‘CalculatorModule’] = global. nativeModuleProxy[‘CalculatorModule’] legacyBinding_->getModule( runtime, ‘CalculatorModule’)
5. 동작 원리 Native Module 탐색과 호출과정 TurboModuleRegistry.js BridgelessNativeModuleProxy::get const module = NativeModules[name]; NativeModules[name] = global.nativeModuleProxy[name]; if (module != null) { return module; } auto turboModule = turboBinding.getModule( runtime, moduleName); CalculatorModule.add(1, 2) if (turboModule.isObject()) { return turboModule; } HostFunction Swift / Kotlin implementation
6. 선택 이유 Nitro Modules를 선택한 이유 01 02 iOS 네이티브 호출 비용 Swift·Kotlin 개발 편의성
7. 선택 이유 01 iOS 연결 방식과 호출 시간 Swift Turbo Modules 동기 함수 10만 회 호출 ObjC interop HostFunction iPhone 15 Pro / Release Objective-C adapter Swift impl. Swift Nitro Modules HostFunction Swift C Interop으로 구현체 접근
8. 선택 이유 02 네이티브에서도 익숙한 비동기 코드 Kotlin Swift Promise.async { fetchValue() } Promise.async { try await fetchValue() } suspendCancalleableCoroutiens { cont -> val value = fetchValue() Promise.resolve(value) cont.resume() } Task { let value = try await fetchValue(); Promise<Value>() .resolve(value) }
9. 적용 사례 react-native-nitro-device-info // 5초마다 한번씩 폴링 const batteryLevel = useBatteryLevel(); // 1초마다 한번씩 폴링 const isHeadphonesConnected = useIsHeadphonesConnected();
10. 적용 사례 기존 코드를 유지하며 옮겨오기 기존 import 호환 계층으로 변경 import DeviceInfo from 'react-native-device-info'; import DeviceInfo from 'react-native-nitro-device-info/compat'; const brand = DeviceInfo.getBrand();
11. 적용 사례 react-native-nitro-cookies/nitro-webview JavaScript Native fetch(...) get set(...) save loadUrl(..) webview.loadUrl(..)
12. 적용 사례 많이 사용해주셔서 감사합니다 :) react-native-nitro-cookies react-native-nitro-device-info
13. 감사합니다 HyunWoo Lee Android Developer, AppsInToss Foundation Team@Toss github.com/l2hyunwoo