Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

React Native under the hood

React Native under the hood

HYPER-APP 2024에서 진행한 React Native under the hood의 Speaker Deck입니다.

HyunWoo Lee

August 14, 2024
Tweet

More Decks by HyunWoo Lee

Other Decks in Programming

Transcript

  1. 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
  2. React Native • 플랫폼별로 android/ios 폴더가 존재 • 플랫폼 빌드를

    위한 여러가지 파일들이 포함되어 있음 • 이외의 Javascript 관련파일 구성 사항들은 React 프로젝트와 거의 동일
  3. JavaScript의 언어특성 • JavaScript는 모듈화된 자바스크립트 파일들을 읽어내지 못함 •

    여러 파일들을 하나의 파일로 만들어주는 도구가 필요함 // A.tsx <View> <Text>Hello A!</Text> </View> // B.tsx <View> <Text>Hello B!</Text> </View>
  4. React Native - Metro • 번들링 • 유틸성 코드 주입(Polyfill)

    • console.log를 네이티브에서 기록하기 위한 기능 • 리액트 네이티브 초기화(InitializeCore)
  5. React Native - Metro • 번들링 • 유틸성 코드 주입(Polyfill)

    • console.log를 네이티브에서 기록하기 위한 기능 • 리액트 네이티브 초기화(InitializeCore)
  6. 코드 변환 - Babel 메트로에 의해 번들링된 코드를 React Native

    실행환경에 맞게 변환하는 과정 Babel이라는 라이브러리 활용 중
  7. First Choice - JSC(JavaScript Core) • Apple에서 제공하는 JavaScript Runtime

    • JSC를 활용해서 리액트 네이티브를 돌아가게 만들 수 있었지만 • C 기반 API • 브릿지가 가져가야하는 너무 많은 책임들 • JSC와 리액트 네이티브의 강결합 • 이와 같은 문제점들이 대두됨
  8. JSI의 Data Flow (Native to JS) • Android/iOS에서는 C++로 명령을

    보내면서 JSI(shared memory layer 에서) 호출 • 메모리 업데이트 되면 JS에 반영이 되어서 표시됨
  9. JSI의 Data Flow (JS to Native Module) 1 . 네이티브

    모듈을 호출하면 JS엔진에 자바스크립트 값을 전달한다.
  10. JSI의 Data Flow (JS to Native Module) 2 . HostFunction로

    이 값이 전달되고. 함수는 이를 C++ dynamic으로 변환 한다.
  11. JSI의 Data Flow (JS to Native Module) 3 . 이

    값은 네이티브 모듈 인프라로 전달 된다. 4 . 플랫폼에서는 이를 플랫폼 타입으로 변환하고 메서드 호출하는 것을 확인
  12. New Architecture - Three Pillars • Turbo Module • 특정

    모듈을 지연 초기화시켜 앱 시작 속도 개선 • Fabric • 새로운 UI 렌더링 아키텍처. • 유저 인터랙션(스크롤, 제스처)을 메인스레드/네이티브 스레드에서 동기적으로 처리 • Codegen • 플랫폼 코드의 타입을 JS에서도 활용할 수 있게 정적 타이핑 지원 • TypeScript 활용시 이득