[React Native] 리액트 네이티브 React.createElement와 JSX 구문과의 관계

 

아래 예제에서 Text를 리액트와 리액트 네이티브에서는 컴포넌트(Component)라 합니다.

 

App.tsx

import React from 'react'
import {Text} from 'react-native'

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

React.createElement는 컴포넌트를 가상 DOM 객체로 만듭니다.

 

컴포넌트는 여러개의 속성(propeaty)과 하나 이상의 자식 컴포넌트를 가질 수 있습니다.

따라서 컴포넌트에는 속성과 자식 컴포넌트가 올 수 있으므로 React.createElement는 다음 형태로 구현합니다.

 

가상_DOM_객체 = createElement(컴포넌트_이름_또는_문자열, 속성_객체, 자식_컴포넌트)

 

이를 랖의 코드와 연관 지어 보면 앞 코드는 '컴포넌트  이름'이 Text이고

'속성 객체'는 없으므로 null이고 자식 컴포넌트는 Hello World임을 알 수 있습니다.

 

이를 XML로는 <Text>Hello World</Text> 처럼 표현할 수 있습니다.

 

XML파서(parser)가 이를 React.createElement(Text, null, 'Hello World') 자바스크립트 코드로 변환해 준다면

이 텍스트를 자바스크립트에서 이용할 수 있습니다.

 

JSX구문은 이런 아이디어에서 비롯된 것이며 이전 게시물에서 언급한 

@babel/piugin-transform-react-jsx 바벨 플러그인이 이 아이디어를 구현한 파서 입니다.

 

JSX 구문에서 중괄호({ })의 의미

 

XML 마크업 언어에 자바스크립트 코드를 삽입하려면 XML 문법에는 없는 기능이 필요합니다.

JSX는 다음 코드에서 보듯 XML 마크업 구조에 중괄호 ({ })를 사용하여

자바스크립트 코드를 감싸는 형태의 문법을 제공합니다.

 

<Text>
{		/* 자바스크립트 주석~  */			}
</Text>

 

또한 이런 식으로 XML에 자바스크립트 코드를 삽입할 수 있으므로

다음과 같이 자바스크립트 변수 값을 XML 구문 안에 표햔할 수 있습니다.

 

const hello = 'Hello World'
<Text>{hello}</Text>

 

 

XML요소 간의 자식 관계와 컴포넌트 간의 자식 관계의 유사성

 

XML는 다음 코드 처럼 요소를 부모/자식 관계로 표현할 수 있습니다.

<div>는 부모 요소이고 <p>는 자식 요소 입니다.

 

- XML의 부모 요소와 자식 요소 -

<div>
	<p> Hello World </p>
</div>

 

JSX 구문은 XML구문을 따르므로 컴포넌트 간의 부모/자식 관계를 다음처럼 표현합니다.

 

- JSX의 부모 요소와 자식 요소 -

<SafeAreaView>
	<Text> Hello World </Text>
</SafeAreaView>

 

그리고 JSX 문은 React.createELement 호출이므로 HJSX문 자체를 변수에 담을 수 있습니다.

 

- JSX문 자체를 변수에 담음 -

const virtualDOM = <SafeAreaView><Text>Hello World</Text></SafeAreaView>

 

또한 변수에 담는 과정을 생략하고 함수의 반환 값으로 사용할 수 있습니다.

 

- 함수의 반환 값으로 사용 -

export default function App(){
	return <SafeAreaView><Text>Hello World</Text></SafeAreaView>
}

 

그런데 JSX구문의 자바스트립트 코드는 반드시 return 키워드 없이 값을 반환해야 합니다.

이처럼 return 키워드 없이 값을 반환하는 구문을

타입스크립트나 ESNext 자바스크립트에서는 표현식(expression)이라 합니다.

 

 

 

 

 

 

 

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