Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native under the hood
Search
HyunWoo Lee
August 14, 2024
Programming
0
41
React Native under the hood
HYPER-APP 2024에서 진행한 React Native under the hood의 Speaker Deck입니다.
HyunWoo Lee
August 14, 2024
Tweet
Share
More Decks by HyunWoo Lee
See All by HyunWoo Lee
선언형 UI를 학습할 때 알아둬야하는 키워드들
l2hyunwoo
0
220
Essential concepts to know when learning Declarative UI
l2hyunwoo
2
630
유연한 Composable 설계
l2hyunwoo
0
550
KotlinConf 2024 Global in South Korea Keynote
l2hyunwoo
0
70
TextField 씹고 뜯고 맛보고 즐기고
l2hyunwoo
0
340
CDG로 모두와 함께 성장하기
l2hyunwoo
0
100
fun HelloKMP(): GladToMeetYou
l2hyunwoo
0
410
Jetpack Compose - 실무에 발라보기
l2hyunwoo
1
180
The Android Wears Material
l2hyunwoo
0
94
Other Decks in Programming
See All in Programming
CSC509 Lecture 12
javiergs
PRO
0
170
Leveling Up Developer Tooling for the Modern Rails & Hotwire Era @ Ruby Türkiye, November 2024
marcoroth
0
150
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
250
新規学習のハードルを下げる方法とは?/ How to Make Learning Something New Easier?
nobuoooo
1
120
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
140
[KR] Open-Source Ecosystems
skydoves
0
110
物流システムにおけるリファクタリングとアーキテクチャの再構築 〜依存関係とモジュール分割の重要性〜
deeprain
1
220
3 Effective Rules for Using Signals in Angular
manfredsteyer
PRO
0
160
Modular Monolith Monorepo ~シンプルさを保ちながらmonorepoのメリットを最大化する~
yuisakamoto
10
3.5k
WebAssembly Unleashed: Powering Server-Side Applications
chrisft25
0
1.9k
AWS Lambdaから始まった Serverlessの「熱」とキャリアパス / It started with AWS Lambda Serverless “fever” and career path
seike460
PRO
1
350
romajip: 日本の住所CSVデータを活用した英語住所変換ライブラリを作った話
sangunkang
0
2.2k
Featured
See All Featured
RailsConf 2023
tenderlove
29
910
A better future with KSS
kneath
238
17k
KATA
mclloyd
29
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
For a Future-Friendly Web
brad_frost
175
9.4k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
326
24k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
93
17k
StorybookのUI Testing Handbookを読んだ
zakiyama
27
5.3k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Transcript
이현우, Viva Republica (Toss) React Native Under The Hood
HyunWoo Lee • Android(React Native) Developer, Toss • Organizer, Kotlin
User Groups • Organizer, GDG Songdo Github: https://github.com/l 2 hyunwoo LinkedIn: https://www.linkedin.com/in/hyunwoo-lee- 0412 / Medium: https://medium.com/@l 2 hyunwoo Velog: https://velog.io/@l 2 hyunwoo
From code to application 목차 Motivation React Native에 대한 간략한
소개
Motivation 이번 세션을 준비한 동기 누가 들으면 좋을까요?
Motivation
Motivation
Motivation 그래서 어떻게 돌아가죠?
Introduction to React Native Learn Once, Write Anywhere
React Native
React Native • 플랫폼별로 android/ios 폴더가 존재 • 플랫폼 빌드를
위한 여러가지 파일들이 포함되어 있음 • 이외의 Javascript 관련파일 구성 사항들은 React 프로젝트와 거의 동일
Fron code to application JavaScript에서 하나의 모바일 앱으로
// A.tsx <View> <Text>Hello A!</Text> </View> // B.tsx <View> <Text>Hello
B!</Text> </View>
JavaScript의 언어특성 • JavaScript는 모듈화된 자바스크립트 파일들을 읽어내지 못함 •
여러 파일들을 하나의 파일로 만들어주는 도구가 필요함 // A.tsx <View> <Text>Hello A!</Text> </View> // B.tsx <View> <Text>Hello B!</Text> </View>
Bundler 여러 모듈/파일을 하나의 파일로 묶는다
None
React Native - Metro • 번들링 • 유틸성 코드 주입(Polyfill)
• console.log를 네이티브에서 기록하기 위한 기능 • 리액트 네이티브 초기화(InitializeCore)
React Native - Metro • 번들링 • 유틸성 코드 주입(Polyfill)
• console.log를 네이티브에서 기록하기 위한 기능 • 리액트 네이티브 초기화(InitializeCore)
코드 변환 - Babel 메트로에 의해 번들링된 코드를 React Native
실행환경에 맞게 변환하는 과정 Babel이라는 라이브러리 활용 중
Runtime 코드가 실행되는 환경
None
None
None
First Choice - JSC(JavaScript Core) • Apple에서 제공하는 JavaScript Runtime
• JSC를 활용해서 리액트 네이티브를 돌아가게 만들 수 있었지만 • C 기반 API • 브릿지가 가져가야하는 너무 많은 책임들 • JSC와 리액트 네이티브의 강결합 • 이와 같은 문제점들이 대두됨
엔진을 추상화해볼까? - JSI
JSI의 Data Flow (Native to JS) • Android/iOS에서는 C++로 명령을
보내면서 JSI(shared memory layer 에서) 호출 • 메모리 업데이트 되면 JS에 반영이 되어서 표시됨
JSI의 Data Flow (JS to Native Module) 1 . 네이티브
모듈을 호출하면 JS엔진에 자바스크립트 값을 전달한다.
JSI의 Data Flow (JS to Native Module) 2 . HostFunction로
이 값이 전달되고. 함수는 이를 C++ dynamic으로 변환 한다.
JSI의 Data Flow (JS to Native Module) 3 . 이
값은 네이티브 모듈 인프라로 전달 된다. 4 . 플랫폼에서는 이를 플랫폼 타입으로 변환하고 메서드 호출하는 것을 확인
JSI를 활용한 Rendering 전략
And Next React Native is evolving right now.
New Architecture - Three Pillars • Turbo Module • Fabric
• Codegen
New Architecture - Three Pillars • Turbo Module • 특정
모듈을 지연 초기화시켜 앱 시작 속도 개선 • Fabric • 새로운 UI 렌더링 아키텍처. • 유저 인터랙션(스크롤, 제스처)을 메인스레드/네이티브 스레드에서 동기적으로 처리 • Codegen • 플랫폼 코드의 타입을 JS에서도 활용할 수 있게 정적 타이핑 지원 • TypeScript 활용시 이득
None
None