iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크
기존에는 앱을 개발하기 위해서는 안드로이드는 kotlin과 java를, ios앱은 swift와 objective-c가 필요하다. 각각의 언어로 앱을 개발해야 하기 때문에, 각 분야의 개발자가 필요하고 그에 따라 유지보수 비용도 많아질 수 밖에 없는 구조이다.
이것을 해결하는 것이 하이브리드 웹앱이다. 웹을 구동하면, 앱 화면을 웹 화면으로 표시하고 웹 기술로 기능을 구현하는 방식이다. 하지만, 브라우저에서 제공하는 성능 이상으로 발휘할 수 없기때문에, 여러가지 하이브리드 앱기술이 나오게 되었다. 자마린, 리액트 네이티브, 플루터 등이 있는데, 나는 우선 리액트를 배워왔기에, 비교적 학습비용이 낮은 리액트 네이티브를 우선적으로 배우려고 한다. 아 그리고, 기존 웹사이트의 React 코드를 재사용할 수 있다는 측면또한 상당히 매력적이다.
그렇다면, 리액트 네이티브는 어떻게 하이브리드 웹앱과 다른가?
리액트 네이티브는 네이티브 브릿지를 통해 네이티브 스레드와 통신하면서 웹앱과 다르게 성능을 최적화시킨다.
그러니까, 자바스크립트 코드가 Native 코드로 바뀐다. 즉, Native Element를 반환한다.
네이티브 브릿지가 무엇이냐?
자바스크립트 코드가 어떻게 Native 코드로 동작할 수 있을까?
바로 네이티브 브릿지가 이를 가능하게 한다. 브릿지는 JavaScript 스레드 정보를 받아 네이티브에 전달한다.
네이티브를 담당하는 Main 스레드가 있고 레이아웃을 계산하는 데 사용하는 백그라운드 스레드인 Shadow 스레드가 있습니다. 또한, 네이티브 모듈이 있는데 각 모듈에 자체 스레드가 있습니다.
- Main Thread & Shadow Thread
- UI Thread라고 불리기도 하며 네이티브 안드로이드와 IOS UI 랜더링에 사용됩니다.
- 예를 들면 안드로이드에서는 measure/layout/draw 작업을 할 때 사용됩니다.
- Native Modules Thread
- 네이티브 API를 사용할 때 사용됩니다.
- 각 모듈마다 스레드를 가지고 있습니다.
- JS Thread
- 애플리케이션의 JavaScript 코드, API 호출, 터치 이벤트 등이 실행되는 스레드입니다.
- 네이티브 뷰에 대한 업데이트는 일괄 처리되고 JS 스레드의 각 이벤트 루프 끝에서 네이티브 측으로 전송됩니다.
- 성능 유지를 위해 랜더링 시간에 맞춰 업데이트 신호를 보냅니다.
- ios 경우 60 frame을 위해 16.67ms 마다 신호를 보내기 때문에 16.67ms 보다 길어지는 동작의 경우 느려 보인다.
.
리액트 네이티브 동작방식을 순서대로 알아보자.
1. 앱이 실행되면 Main 스레드가 실행되고 JS bundles를 로딩합니다.
2. JS 번들 로딩이 완료되면 Main 스레드는 JS 스레드로 보냅니다.
JS 스레드가 무거운 작업을 진행하더라도 Main 스레드는 문제가 발생하지 않기 때문입니다.
3. React가 랜더링을 시작할 때 Reconciler가 "dffing"을 시작하고 새로운 가상 돔(Virtual Dom)을 생성한 뒤 변경사항을 다른 스레드 (Shadow Thread)로 전달합니다.
4. Shadow Thread가 layout을 계산 한 뒤 layout의 parameter / object를 Main Thread로 보냅니다.
5. Main Thread는 shadow thread가 보낸 레이아웃을 화면에 렌더링 합니다.
'React-Native' 카테고리의 다른 글
| [React-Native] 안드로이드 시뮬레이터로 실행하기 (0) | 2023.03.21 |
|---|
