React Native 새로운 아키텍처

@@@@@ 이미지들은 모두 아래에 참고한 링크에서 따온 것들이다.

 

JavaScript에서의 실행흐름을 알고난 뒤로 문득 React Native에서도 실행흐름이 궁금해져서 자료를 찾고 있었다.

 

 

흔히 이런 그림이 있는데, JavaScript 스레드에서는 네이티브에 직접적으로 통신할 수가 없어서

UI를 그려주려면 브릿지를 통해 Shadow Thread라는 곳에 전달을 해준다.

Shadow 스레드는 자바스크립트 스레드 -> 브릿지로 전달받은 데이터를 통해 레이아웃을 계산해준다.

메인스레드는 Shaodw 스레드에서 계산된 레이아웃을 기반으로 UI를 그려준다. 네이티브 코드도 여기서 실행한다.

 

서로 통신하는 과정에서 JSON으로 직렬화해서 데이터를 주고받는다고 하는데,

벌써 2~3번이 일어난 것이다.

다시 자바스크립트 스레드로 전달하려면 역직렬화를 통해서 전달된다

 

메트로: 웹팩과 같은 번들러 역할 (실제로 react native cli에서는 에뮬레이터를 돌리기 전에 빌드를 한다. 아마 이 과정을 언급하는 것 같다.)

번들된 JS: JS 스레드 내부, 브릿지와 통신하고 네이티브 기기와 통신하는 듯 하다.

Yoga: Shadow 스레드 내부에서 페이스북이 사용하는 엔진이다.

Native UI + Native Modules: 메인스레드

 

이러한 구조에서 상호작용을 짧은 시간내에 많이 한다면 아래 사진과 같이 이벤트를 전달하는 과정에서 프레임 드랍이 생긴다. 이는 성능적인 부분에서 매우 좋지 않다. 가령 애니메이션이 있다고 치면 애니메이션이 버벅이게 된다.

 

https://www.youtube.com/watch?v=TU_kTuz2i9Y

 

 

 

React Native에서 이러한 문제를 해결하기 위해 새로운 아키텍처를 발표했다.

구조는 다음과 같다.

 

 

 

정확히 언제 적용되는지에 대한 것은 보지 못했지만 성능적인 부분에 있어 향상되었다고 주장한다.

 

1. JS 스레드는 JavaScriptCore라는 것을 사용했었는데 이를 사용하지 않고 고성능 JS를 사용할 수 있다.

=> Hermes, V8 등

 

2.  브릿지를 JSI로 대체

브릿지 대신에 JSI (JavaScript Interface)라는 것이 등장했다.

JSI는 Fabric & TurboModule 이라는 것을 활성화한다. (터보모듈이 무엇인지는 더 찾아봐야겠다.)

JSI는 JS스레드와 네이티브 모듈을 동기화한다. 이를 통해서 C++의 호스트 객체를 참조하고 메소드를 호출할 수 있다.

이로써 더 빠른 경험을 누릴 수 있다.

공유 소유권이라는 개념이 제공되어 네이티브 측과 JS스레드가 직접 통신할 수 있다고 한다.

 

3. 네이티브 모듈에 대한 직접 제어

네이티브 모듈에 대한 전체 제어라는 것인데, 응용 프로그램이 시작할 때 모두 시작하는 대신 필요한 경우에만 실행한다고 한다.

 

4. Fabric

UI Manager의 새 아키텍처이다. C++에서 바로 Shadow Tree를 생성하여 프로세스를 신속하게 처리하고 렌더링하는 데 필요한 단계 수를 줄여준다.

 

5. CodeGen

React Native와 Native 부분 간의 원활한 통신을 보장하기 위한 것으로 두 스레드의 호환성을 자동화하고 동기화한다고 한다.

 

뭔가 구체적으로 어떻게 얼만큼 성능이 향상되었는지는 모르겠지만

아키텍처가 변한다고 해서 코드를 마이그레이션한다거나 그런 걱정은 없다고 한다.

 

 

Reference

https://www.youtube.com/watch?v=TU_kTuz2i9Y

https://evanjin.dev/development/react-native-%EC%B0%B8%EA%B3%A0%EC%82%AC%ED%95%AD%EB%93%A4/

https://litslink.com/blog/new-react-native-architecture

https://medium.com/swlh/react-natives-re-architecture-in-2020-9bb82659792c

 

@@@@@