[React Native] 리액트 네이티브 DOM과 렌더링 - 물리 DOM, 가상 DOM, 차이점, react 패키지 역할, 브릿지 방식 렌더링

 

리액트 네이티브 DOM과 렌더링

 

DHTML 방식은 자바스크립트가 <div>Hello world<div>와 같은 텍스트를 만드는 것이 아니라

객체 지향 언어의 상속 관계로 설계한 문서 객체 모델(Document Object Model, DOM)타입 자바스크립트 객체를

생성하는 방식으로 동작한다.

 

웹 브라우저는 정적 HTML 문서를 만나면 파싱(parsing) 과정을 거쳐

웹 브라우저 개발 도구 창(F12)에서 본 DOM 트리 같은 형태의 자바스크립트 객체 구조를 만든다.

 

웹 브라우저는 <div>, <h1>과 같은 HTML 형태로 보여주지만 자바스크립트 코드 관점에서

<div>는 HTMLDivElement 클래스의 인스턴스(instance)이고, <h1>은 HTMLHeadingElement클래스의 인스턴스이다.

HTMLDivElement, HTMLHeadingElement와 같은 클래스를 DOM이라 부르고

DOM 클래스의 인스턴스를 DOM객체라 한다.

 

DOM객체는 무수히 많고 이 많은 DOM 객체는 부모/자식 형태의 나무 구조(tree structure)를 이루는데

이를 DOM 트리 구조, 줄여서 DOM 구조라 한다.

그리고 웹 브라우저가 HTML을 파싱 하여 자바 스크립트 DOM구조로 만드는 것을 렌더링(rendering)이라 한다.

 

 

물리 DOM과 가상 DOM

 

리액트 프레임워크에는 독특하게 물리 DOM 구조와 가상 DOM구조라는 용어를 사용한다.

 

물리 DOM 구조는 웹 브라우저에서 자바스크립트 코드가 생성하는 실제 DOM 구조이고,

이와 달리 가상 DOM 구조는 리액트 코드가 생성한 자바스크립트 객체 구조이다.

 

리액트는 특정 시점에서 이 가상 DOM 구조를 물리 DOM 구조로 만드는데,

이를 '리액트가 렌더링 한다'라고 말하고 이 기능을 수행하는 패키지를 렌더러(renderer)라 한다. 

 

 

리액트 프레임워크와 리액트 네이티브 프레임워크의 차이

리액트는 가상 DOM 구조를 react-dom이란 랜더러 패키지를 사용하여

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

이와는 달리 리액트 네이티브는 react-native라는 렌더러 패키지를 사용하여

랜더링 하는 방식으로 동작하는 프레임워크이다.

리액트에서는 react-dom 랜더러를 DOM 렌더러라 하고, react-native 렌더러를 네이티브 렌더러라고 한다.

 

 

react패키지의 역할

 

리액트와 리액트 네이티브 프레임워크는 모두 react라는 패키지를 사용하는데,

react 패키지는 파일을 가상 DOM 구조로 만드는 역할을 하는 패키지이다.

네이티브 렌더러는 리액트 요소를 안드로이드 프레임워크나

iOS용 UIKit 프레임워크의 화면 UI 객체로 바꿔주는 역할을 한다.

 

브릿지 방식 렌더링

 

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

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

그 이유는 리액트 네이티브 프로젝트의 android와 ios디렉터리에 있는

자바나 오브젝트브-C로 구현한 네이티브 모듈 쪽에서 렌더링이 진행되기 때문이다. 

 

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

이 C++ 언어로 구현된 JavaScriptCore 엔진은 안드로이드에서는 JNI(Java Native Interface) 방식으로,

iOS에서는 오브젝티브-C의 FFI(Foreign Function Interface) 방식으로 연결되어 동작합니다.

 

엔진(Engine)과 라이브러리(Library)는 같은 개념입니다.

다만 일반적으로 코드 분량이 방대한 라이브러리를 엔진이라 부르는 경향이 있습니다.

 

리액트 네이티브 앱을 폰에 설치하고 실행하면

리액트 네이티브의 네이티브 모듈이 실행되면서 네이티브(즉 안드로이드 프레임워크나 IOS UIKit 쪽 렌더링)를 담당하는

UI스레드와 자바스크립트 코드를 실행하는 자바스크립트 엔진 스레드 2개가 동시에 동작한다.

 

그리고 이 두 스레드는 메시지 큐(massage queue) 방식으로 서로 렌더링과 관련된 데이터를 주고받는다.

사용자가 화면을 터치하거나 하면 UI스레드는 이 내용을 자바스크립트 쪽 스레드에 이벤트 형태로 넘긴다.

이런 방식으로 동작하는 프레임워크를 브리지(bridge) 방식 프레임워크라 한다. 

 

스레드란 운영체제가 제공하는 서비스이다.

앱을 실행하면 운영체제는 프로그램 코드를 하나씩 실행한다.

자바스크립트는 1개의 스레드에서 동작하므로스레드의 실체를 느끼기 어렵지만 자바나 오브젝티브-C와 같은 언어로 구현한 앱은 여러 개의 스레드에서 동시에 실행할 수 있다.

자바스크립트 엔진처럼 개의 스레드에서 동작하는 앱을 단일 스레드(single thread)앱이라 하고,

리액트 네이티브 앱처럼 2개 이상의 스레드에서 동작하는 앱을 단일 스레드(multi-thread)앱이라 한다.

 

리액트 네이티브 전용 패키지에는

항상 자바스크립트 스레드에서 동작하는 쪽과 UI스레드에서 동작하는 쪽이 따로 있다.

이 때문에 자바스크립트 쪽만 설치하고

네이티브, 즉 UI스레드에서 동작하는 똑을 설치하지 않으면 패키지가 정상 작동하지 않는다.