리액트 네이티브는 iOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만들기 위한 자바스크립트 프레임워크이다.
리액트 네이티브의 동작 원리는 리액트의 가상(virtual) DOM과 관련되어 있습니다. DOM 수정은 매우 값비싼 동작이기 때문에 리액트는 페이지의 변화를 바로 렌더링 하는 대신 메모리의 가상 DOM을 이용해 변화가 필요한 곳을 계산하고 최소한의 변경사항만 렌더링한다.
리액트 네이티브는 같은 원리를 이용해 브라우저의 DOM이 아닌 오브젝티브-C API를 호출하여 iOS 컴포넌트를 렌더링하고, 자바 API를 호출하여 안드로이드 컴포넌트를 렌더링한다. 이는 브릿지가 대상 플랫폼의 네이티브 UI 요소에 접근하는 인터페이스를 제공하기 때문에 가능하다.
리액트 네이티브는 다음의 다중 스레드 모델로 구성되어 있다.
메인 스레드 (Native Queue)
- 프로그램이 시작되자마자 생성되는 기본 스레드이다
- 앱을 로드하며 Javascript 코드 실행을 위한 JS 스레드를 실행시킨다.
- '누름', '터치' 등과 같은 UI 이벤트를 수신하여 RN 브리지를 통해 JS 스레드로 전달한다.
- Javascript가 로드되면 JS 스레드는 화면에 렌더링해야 하는 항목에 대한 정보를 보낸다. 이 정보는 섀도우 스레드에서 레이아웃 계산에 사용된다.
- 마지막으로 이러한 지시사항은 뷰 렌더링을 위해 다시 기본 스레드로 전달된다
JS 스레드 (JS Queue)
- JS 큐는 JS 스레드가 실행되는 스레드 큐이다. JS 스레드는 모든 비즈니스 로직, 즉 RN으로 작성된 코드를 실행한다.
섀도우 스레드
- 섀도우 스레드는 기본적으로 뷰 위치를 계산하는 방법을 결정하는 수학적 엔진과 같다.
- 섀도우 스레드는 레이아웃을 계산하는 데 필요한 정보만 있는 기본 객체인 섀도우 노드로 이루어져 있다.
네이티브 모듈
- RN에 의해 생성된 스레드 외에도 애플리케이션의 성능을 높이기 위해 커스텀 네이티브 모듈에 스레드를 생성할 수도 있다. 예를 들어 애니메이션은 JS 스레드에서 작업 부하를 줄이기 위해 별도의 네이티브 스레드에 의해서 처리된다.
참고