현재 아키텍쳐

• 주요 3가지의 Thread로 React Native가 실행된다.

  • The JavaScript thread
    • 자바스크립트 엔진에 의해 작동되며, 자바스크립트 코드 번들링을 하기 위해 사용된다.
    • Javascript Core 라고 불리는 엔진이 사용된다.
  • The Native/UI thread
    • Native Module ( 블루투스 기능 같은 것들 ), UI 렌더링 그리고 스크롤과 같은 gesture 이벤트 작동을 처리하기 위해 사용된다.
  • Shadow thread
    • 요소들이 스크린에 렌더링이 되기전에 요소들의 크기, 포지션등을 계산하기 위해 사용된다.
    • Yoga 라고 불리는 레이아웃 엔진이 사용된다.
  💡

  위 3가지의 Thread가 서로 커뮤니케이션을 하면서 사용자가 쓸 수 있는 Screen이 만들어지게 된다!

각 Thread는 어떤식으로 커뮤니케이션을 할까?

• 버스같은 역할을 하는 브릿지를 통해서 커뮤니케이션을 한다

브릿지란?

• 번들링된 JS Code를 JSON 형태로 serialization을 한다.
• serialization 된것을 deserialization ( decode ) 작업을 하여 Native Thread로 보내준다.
• 해당 과정에서 Time Consuming이 발생하며, 느린 퍼포먼스를 보여주게 된다.
• 이 모든 작업은 비동기 작업으로 이루어지며, 이로써 FlatList로 많은 데이터를 다루게 될때 이슈가 발생하게 된다. 일반적인 상황에서 대부분 비동기가 장점으로 작용하나 가끔씩 동기적으로 처리될 필요가 있을때가 있다.

새로운 아키텍쳐

• 기존 브릿지를 제거하고, 직접적으로 Native UI method를 컨트롤이 가능
• 중간 데이터 전달을 위한 Time Consuming이 없기때문에 훨씬 빨라졌다

JSI ( Javascript Interface )

• C++로 만들어졌다
• 브릿지가 대체된 새로운 모듈이다
• native 영역에서 곧바로 메서드를 실행시킬 수 있다.
• 브릿지는 Javascript Core 엔진에서만 양립할 수 있지만 JSI는 Javascript Core 엔진과 디커플링이 될 수 있다. 즉, V8 엔진과 같은 최고의 자바스크립트 엔진을 사용 할 수 있다.
• Javascript가 Native Method에 대한 reference를 계속 가지고 있게 해준다. 이것은 웹과 비슷한 방식으로 작동하는 것이다.

const container = document.createElement(‘div’);

예를들어 container 라는 변수에 createElement를 한 value를 할당했을때 container를 입력하고 “.” 을 누를 시 관련 method들이 바로 나오게 되는데, 이것 또한 C++로 초기화된 DOM 요소의 참조값을 가지고 있기때문이다.

즉 JSI는 다른 자바스크립트 엔진을 사용 할 수 있도록 해주며, JS Thread에서 곧바로 Native 영역의 Thread와 커뮤니케이션을 할 수 있도록 해준다. 때문에 브릿지의 serialization/deserialization 의 작업이 사라졌기때문에, 훨씬 더 빠른 속도를 보여준다. 뿐만아니라 C++로 작성되었기때문에, 스마트 티비 및 시계에서도 동작이 가능하게 되면서 타겟층도 더 넓힐 수가 있다.

Fabric

• 기존 비동기적으로 렌더링되어 발생했던 ( 많은 데이터를 가지고 FlatList에서 스크롤시 발생하는 이슈 ) 를 해결한 새로운 렌더링 시스템
• JSI 를 사용하여 native method 에 대한 reference를 가지고 있어, 곧바로 사용이 가능한것 처럼 UI method에 대한 reference를 지니고 있다. 그렇기 때문에 UI에 대해 동기적으로 처리가 가능하다. 때문에 더 빠른 렌더링을 보여주며, 더 안정적인 gesture handling이 가능하다.
• 즉, 즉각적으로 반응이 와야하는 UI 관련된 event들에는 동기적으로 처리를 하게해주어 빠른 동작이 가능하게 바뀌었으며, API 요청과 같은 case들은 비동기적으로 처리가 되어 마치 웹처럼 작동하게 바뀌었다.

Turbo Modules

• 현재 아키텍쳐에서는 모든 native module ( bluetooth, geolocation 등 )들을 앱이 열리기전에 초기화를 시킨다.
• 새로운 아키텍쳐에서는 JSI 덕에 native module에 대한 reference를 가지고 있고, 필요할때 load를 하는 lazy 방식을 사용하여 더욱 더 최적화된 방식이 사용된다. 그덕분에 첫 앱 실행에 대한 퍼포먼스가 훨씬 더 향상된다.

요약

• 데이터를 운반하는 버스같은 역할을 하는 브릿지가 사라지고 JSI 라는 모듈이 도입되어 Native 영역에 대한 reference를 직접적으로 가지고 있어 빠른 커뮤니케이션이 가능하다
• JavaScriptCore 엔진만을 사용이 가능한 것이아니라, V8과 같은 다양한 엔진을 사용할 수 있다.
• 웹과 같은 요소들의 렌더링이 가능하다
• Turbo Modules의 Lazy Loading 이 가능하다.
• 시간에 민감한 Task들에 대한 동기처리가 가능하다.