리액트 네이티브 React Native | React.createElement와 JSX

 

⭕ 리액트 네이티브 React Native | React.createElement와 JSX

리액트 네이티브에서는 UI를 작성하기 위해 컴포넌트를 사용합니다. 텍스트를 표시하기 위해서는 Text 컴포넌트를 사용합니다. 이 때, React.createElement와 JSX는 컴포넌트를 생성하는 두 가지 주요 방법입니다.

 

➡️ React.createElement 함수

React.createElement 함수는 가상 DOM 객체를 생성하는 데 사용됩니다. 이 함수는 세 개의 인자를 받습니다. 

• 첫 번째 인자: 컴포넌트의 이름 (예: 'Text')
• 두 번째 인자: 속성 객체 (props)
• 세 번째 인자: 컴포넌트의 자식 요소

---

예를 들어, 다음 코드는 Text 컴포넌트를 생성합니다.

const virtualDOM = React.createElement('Text', null, 'Hello, World!');

이 코드에서 'Text'는 텍스트를 표시하는 컴포넌트의 이름이며, 속성 객체는 null로 지정되었고, 'Hello, World!'는 Text 컴포넌트의 자식 요소로 전달됩니다. React.createElement 함수는 이 정보를 바탕으로 Text 컴포넌트에 대한 가상 DOM 객체를 생성합니다.

 

 

➡️ JSX 구문

JSX를 사용하면 XML 문법으로 리액트 컴포넌트를 작성할 수 있습니다. JSX 코드는 Babel 도구를 사용하여 일반 JavaScript 코드로 변환됩니다. 변환 과정에서 JSX 코드는 React.createElement 함수 호출로 변환됩니다.

---

<Text>Hello, World!</Text>

 

이 코드는 Babel 도구를 통해 다음과 같은 React.createElement 함수 호출로 변환됩니다.

React.createElement('Text', null, 'Hello, World!');

 

➡️ JSX 구문 - 중괄호

JSX에서 중괄호 {}를 사용하여 자바스크립트 코드를 XML 마크업 안에 삽입할 수 있습니다. 이를 통해 자바스크립트 변수, 표현식 또는 함수 등을 JSX 내부에서 사용할 수 있습니다. 이것은 JSX를 더 동적으로 만들어주는 중요한 특징 중 하나입니다.

---

예를 들어, 다음은 JSX에서 중괄호를 사용하여 자바스크립트 변수를 표현하는 예시입니다:

const name = 'John';
const greeting = <Text>Hello, {name}!</Text>;

위의 예시에서 {name}은 변수 name의 값을 JSX 안에 삽입하는 것을 나타냅니다. 결과적으로 greeting 변수에는 'Hello, John!'이라는 텍스트를 가진 Text 컴포넌트가 할당됩니다.