[React Native] 리액트 네이티브 React.createElement API

리액트와 리액트 네이티브에서 React.createElement API는 가장 저수준 기능으로서 가상 DOM 객체를 생성한다.

 

HTML로 웹 브라우저에 'Hello World' 등의 텍스트를 출력하려면 아래와 같이 작성한다.

<p>Hello world<p>

그러면 웹 브라우저가 렌더링하여 화면에 웹 페이지를 표시한다.

 

자바스크립트로 앞의 HTML 텍스트과 동일한 효과를 구현하면 다음과 같은 코드로 물리 DOM 객체를 생성한다.

const pElement = document.createElement('p')
pElement.innerText = 'Hello JavaScript world'

 

그리고 이 물리 DOM 객체는 다음 코드가 있어야만 렌더링되어 화면에 나타난다.

document.body.appendChild(pElement)

HTML과 달리 자바스크립트는 DOM 객체 생성 과정과 렌더링 등 2개의 과정이 필요하다.

 

리액트 프레임워크를 사용하여 앞의 자바스크립트 효과를 구현하려면 다음과 같은 코드로 가상 DOM 객체를 생성한다.

const pElement = React.createElement('p', null, 'Hello React world')

앞의 document.createElement는 물리 DOM 객체룰 생성하지만

React.createElement는 가상 DOM 객체를 생성한다는 차이가 있다.

 

다음 코드로 이 pElement 가상 DOM 객체를 물리 DOM 객체로 변환하여 화면에 표시 한다.

import ReactDOM from 'react-dom'

ReactDOM.render(pElement, document.body)

 

리액트 네이티브도 리액트처럼 가상 DOM 객체를 생성하다.

const textElement = React.createElement(Text, null, 'Hello world')

 

리액트 네이티브 렌더러는 네이티브에서 동작하므로

다음처럼 가상 DOM 객체를 네이티브로 넘겨주는 방식으로 동작한다.

export default function App(){
	const textElement = React.createElement(Text, null, 'Hello world')
    return textElement
}

 

react-native-cli는 네이티브 모듈에서 동작하는 자바스크립트 엔진이

가상 DOM 객체를 넘겨주는 App의 존재를 알 수 있도록 다음 내용의 index.js 파일을 만든다.

import {AppRegistry} from 'react-native'
import App from './App'
import {name as appName} from './app.json'

AppRegistry.registerComponent(appName, () => App)

 

또한 네이티브 모듈에서 동작하는 자바스크립트 엔진이 이 파일의 존재를 알 수 있도록

다음과 같은 코드를 가진 자바 파일도 만든다.

android/app/src/main/java/com/win/MainApplication.java

(생략)
@Override
protected String getJSMainMouleName(){
	return "index"
};
(생략)

이제 리액트 네이티브 앱을 폰에서 실행하면 MainApplication.java가 실행되고,

자바스크립트 스레드에서 실행되는 자바스크립트 엔진이

getJSMainModuleName을 통해 index.js 파일의 존재를 알게 된다.

 

이 index.js 파일을 통해 App의 존재를 알고 App을 호출하여 얻은 가상 DOM 객체를

브릿지를 통해 네이티브로 넘겨 마침내 'Hello world'를 출력한다.

 

아이폰(iOS)도 개발 언어와 코드 구조만 다를 뿐 안드로이드와 같은 방식으로 동작한다.

 

 

 

 

 

 

 

 다음 내용은 위 책을 참고하여 작성하였습니다:)