리액트 네이티브 프레임워크의 작동 원리
물리DOM과 가상DOM
- 물리 DOM 구조는 웹 브라우저에서 자바스크립트 코드가 생성하는 실제 DOM 구조
- 가상 DOM 구조는 리액트 코드가 생성한 자바스크립트 객체 구조
- 리액트는 특정 시점에서 이 가상 DOM 구조를 물리 DOM 구조로 만드는데, 이를 '리액트가 렌더링한다' 하고, 이 기능을 수행하는 패키지를 renderer라 함
리액트 프레임워크와 리액트 네이티브 프레임워크의 차이
- 리액트는 가상 DOM 구조를 react-dom이란 렌더러 패키지를 사용하여 물리 DOM 구조로 렌더링하는 방식의 프레임워크
- 리액트 네이티브는 react-native라는 렌더러 패키지를 사용하여 렌더링하는 방식의 프레임워크
- 리액트에서는 react-dom 렌더러를 DOM 렌더러라 하고 react-native 렌더러를 네이티브 렌더러라 함
react 패키지의 역할
- 리액트와 리액트 네이티브 프레임워크는 모두 react라는 패키지를 사용
- react 패키지는 App.tsx파일을 가상 DOM 구조로 만드는 역할을 하는 패키지
- 네이티브 렌더러는 리액트 요소를 안드로이드 프레임워크나 IOS용 UIKit 프레임워크의 화면 UI객체로 바꿔주는 역할을 함
브리지 방식 렌더링
- 모든 것이 자바스크립트로 동작하는 리액트에서는 React.render라는 DOM 렌더러의 동작을
코드로 확인할 수 있지만 리액트 네이티브에서는 네이티브 렌더러의 모습을 확인할 수 없다.- 리액트 네이티브는 프로젝트의 android와 ios 디렉터리에 있는 자바나 오브젝트-C로 구현한 네이티브 모듈
쪽에서 렌더링이 진행 되기 때문- 네이티브 모듈 쪽에는 JavaScriptCore라는 이름의 자바스크립트 엔진이 동작 함
- 이 C++ 언어로 구현된 JavaScriptCore 엔진은 안드로이드에서는 JNI(Java Native Interface) 방식으로,
IOS에서는 오브젝트-C의 FFI(Foreign Function Interface) 방식으로 연결되어 동작
- 리액트 네이티브 앱을 폰에 설치하고 실행하면 리액트 네이티브의 네이티브 모듈이 실행되면서
네이티브(안드로이드 프레임워크나 IOS UIKit 프레임워크 쪽 렌더링)를 담당하는 UI 스레드와 App.tsx와 같은 자바스크립트 코드를 실행하는 자바스크립트 엔진 스레드 2개가 동시에 동작- 이 두 스레드는 message queue 방식으로 서로 렌더링과 관련된 데이터를 주고 받음
- 사용자가 화면을 터치하거나 하면 UI 스레드는 이 내용을 자바스크립트 쪽 스레드에 이벤트 형태로 넘김
- 이런 방식으로 동작하는 프레임워크를 bridge 방식 프레임워크라 함
- RN전용 패키지에는 자바스크립트 스레드에서 동작하는 쪽과 UI 스레드에서 동작하는 쪽이 따로 있음 이 때문에 자바스크립트 쪽만 설치하고 네이티브, 즉 UI 스레드에서 동작하는 쪽을 설치하지 않으면 패키지가 정상 동작하지 않음
.