react와 react-native

렌더러

react는 가상 DOM 구조를 react-dom이라는 렌더러 패키지를 사용하여

물리 DOM 구조로 렌더링하는 방식으로 동작하는 프레임워크이다.

(홈페이지에는 라이브러리라고 되어있으나, 이제는 프레임워크라고 불러도 무방할듯)

 

이와 달리 react native는 react-native라는 렌더러 패키지를 사용하여 렌더링하는 방식으로 동작하는 프레임워크이다.

 

그래서 react는 DOM렌더러

react native는 native렌더러라고 불린다.

 

브리지방식 렌더링

모든것이 자바스크립트로 동작하는 react에서는 Raect.render라는 DOM렌더러의 동작을 코드로 확인할 수 있지만,

리액트 네이티브에서 native 렌더러의 모습은 확인할 수 없다.

왜냐하면 리액트의 네이티브 프로젝트의 android, ios 폴더에있는 java나 objective-c로 구현된 네이티브 모듈에서 렌더링이 진행되기 때문이다.

 

네이티브 모듈쪽에는 JavascriptCore라는 이름의 자바스크립트 엔진이 동작한다.

C++ 언어로 구현된 JavascriptCore는 안드로이드에서는 JNI (Java Native Interface), IOS에서는 FFI(Foreign Function Interface) 방식으로 연결되어 동작한다.

 

그래서 RN앱을 기기에서 실행하면, 네이티브 UI스레드와 App.tsx와 같은Javascript 코드가 동시에 동작한다.

이 2개의 스레드는 메시지큐 방식으로 서로 렌더링과 관련된 데이터를 주고받는다.

화면을 터치하면 UI스레드는 내용을 javascript 쪽 스레드로 이벤트형태로 넘기고, javascript에서 처리를하면 다시 UI스레드로 이벤트 형태로 넘긴다.

이런 방식을 브리지방식 프레임워크라고 한다.