React Native 작동 원리 간단정리

React Native 작동 원리 간단정리

Main Thread, Native Bridge, JS Thread

크게 Main Thread, Native Bridge, JS Thread 로 나뉘어 동작함

• Native Bridge

  Main Thread 와 JS Thread 소통하는 다리

  클라이언트 (Main Thread) - 서버 (JS Thread)

  병목현상 생길 수 있음 (최적화는 건너는 횟수를 최소한으로 해야함)

  • Shadow Thread

    JS Thread 로부터 넘어오는 정보를 활용하여 화면의 layout 을 계산한 뒤 Main Thread 로 넘겨줌
    
    사용자들의 UI 이벤트 명령을 받고 Native Bridge 를 경유해 JS Thread 로 넘겨줌
    

  • deadline

    화면의 주사율에 따라 JS 스레드의 이벤트 루프 처리 속도의 요구 사항이 달라짐

• JS Thread

  Webpack 같은 번들러를 사용한 하나의 JS 코드를 실행함

  이벤트 루프 방식

  이벤트 루프 끝날때마다 메인스레드에 변경사항에 관한 정보 전달

  React 의 Virtual DOM (Diffing Algorithm) 을 이용

• Main Thread

  Objectvie-C/Swift(iOS), Java/Kotlin(Android) 이 담당하는 곳

  Native Bridge 로부터 넘어오는 정보 해석 후 UI 화면에 표시

  앱 실행되자마자 시작됨

  앱 로드하고 JS Thread 실행

• 실행 과정

  1. 앱 시작시

  2. Main Thread 실행

  3. Main Thread 가 JS Thread 실행 및 JS 번들 로드

  4. JS Thread 가 React 이용해 변경사항 Native Bridge 로 전송

  5. shaodw Thread 가 화면 레이아웃 계산

  6. 계산이 끝난 레이아웃의 파라미터나 객체 Main Thread 로 보냄

  7. 사용자 UI 이벤트 정보 Native Bridge 경유

  8. JS Thread 가 받은 정보 이용해 비즈니스 로직 실행

  9. 5 ~ 8 번 반복