codementor.io 에서 Saket Kumar 님이 작성한 How React Native Works? 번역 자료입니다. 번역에 문제가 있다면 댓글 달아주시구요. 원문을 보시기를 추천드립니다.
React Native는 어떻게 작동합니까?
React Native 플랫폼을 사용하여 많은 앱을 구축 할 수 있습니다.
그러나 기본 프로젝트의 로우 레벨 코드에서는 어떻게될까요?
먼저 로우 레벨 코드에서 정확히 어떤 일이 발생하는지 알려드리겠습니다.
React Native App에는 4 개의 스레드가 있습니다.
1) UI Thread : 메인 스레드라고도합니다. 기본 안드로이드 또는 iOS UI 렌더링에 사용됩니다. 예를 들어, 안드로이드에서 이 스레드는 안드로이드 measure/layout/draw에 사용됩니다.
2) JS Thread : JS 스레드 또는 Javascript 스레드는 로직이 실행될 스레드입니다. 예를 들어 애플리케이션의 자바스크립트 코드가 실행되고, API 호출이 이루어지고, 터치 이벤트가 처리되는 등의 스레드가 있습니다. 네이티브 뷰에 대한 업데이트는 일괄 처리되어 JS 스레드의 각 이벤트 루프 끝에서 네이티브 측으로 전달되며 마지막에 UI 스레드에서 실행됩니다.
좋은 성능을 유지하려면 JS 스레드는 다음 프레임 렌더링 데드라인 전에 배치 업데이트를 UI 스레드에 전달할 수 있어야합니다. 예를 들어, iOS는 초당 60 프레임을 표시하며 이는 16.67ms마다 새로운 프레임으로 이어집니다. Javascript 이벤트 루프에서 UI 변경으로 이어지는 복잡한 처리를 수행하고 16.67ms 이상이 걸리면 UI가 느리게 나타납니다.
UI 스레드에서 완전히 일어나는(happen completely) 네이티브 뷰는 예외입니다. 예를 들어, navigatorIOS 또는 scrollview는 UI 스레드에서 완전히 실행(run completely)되므로 느린 js 스레드로 인해 차단되지 않습니다.
3) Native Modules Thread : 때때로 앱이 플랫폼 API에 액세스 해야하는 경우가 있으며 이는 네이티브 모듈 스레드의 일부로 일어납니다.
4) Render Thread : Android L (5.0)에서만 리액트 네이티브 렌더링 스레드가 UI를 그리는데 사용되는 실제 OpenGL 명령 생성에 사용됩니다.
React Native 작업과 관련된 프로세스
1.앱을 처음 시작할 때 기본 스레드가 실행을 시작하고 JS 번들 로딩(JS bundles)을 시작합니다.
2.JavaScript 코드가 성공적으로 로드되면 메인 스레드가 다른 JS 스레드로 전달됩니다. JS의 무거운 계산(heavy calculations)을 스레드가 잠시 처리하면 UI 스레드가 언제나 문제를 일으키지 않기 때문입니다.
3.React가 렌더링을 시작할 때 조정자(Reconciler)는 “diffing”을 시작하고 새로운 가상 DOM(layout)을 생성 할 때 다른 스레드 (Shadow thread)로 변경 사항을 보냅니다.
4.shadow thread는 레이아웃을 계산 한 다음 레이아웃 매개 parameters/objects를 메인(UI) 스레드로 전달합니다. (여기서 왜 “shadow”라고 부르는지 궁금 할 수도 있습니다. shadow node를 생성하기 때문입니다.)
5.메인 스레드만 화면에 무언가를 렌더링 할 수 있기 때문에 섀도우 스레드는 생성 된 레이아웃을 메인 스레드로 보내야만 UI 렌더링을합니다.
리액트 네이티브 분리
일반적으로 React Native는 세 부분으로 나눌 수 있습니다.
1.React Native - Native side
2.React Native - JS side
3.React Native - Bridge
이것을 종종 “React Native의 3 가지 부분” 이라고 합니다.