[React Native] JSX 구문

프로젝트 생성

npx react-native init ch02_2 --template react-native-template-typescript

TypeScript React Native 프로젝트를 생성한다.

 

 

Hello JSX World!

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

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

• App 함수의 return 문 내 코드는 XML(eXtensible Markup Language)로, 태그 이름을 자유롭게 할 수 있다.

npm run android

 

 

JSX

• JavaScript + XML. React Native에서 JavaScript 코드와 XML 구문을 결합하여 사용하는 코드
• JSX 구문이 있는 TypeScript는 확장자가 .tsx 이어야 하고, JSX 구문이 있으면 import React from 'react'의 import문이 필요하다.
• JSX 구문은 React.createElement 호출 코드를 간결하게 만들 수 있다. TypeScript 컴파일러인 tsc는 JSX 구문 컴파일 시 React.createElement 함수를 호출하는 자바스크립트로 변환한다. 
• JSX 구문에서 중괄호({})는 XML 마크업 언어 내부에서 자바스크립트 코드를 쓰고자 할 때 사용한다.

<Text>
{ /* JavaScript code */ }
</Text>

• XML 구문 안에 JavaScript 변수를 표현할 수 있다.

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

• JSX 구문은 React.createElement 호출이기 때문에 변수에 JSX 구문을 담을 수 있다.

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

• JSX 구문을 함수의 반환값으로 사용할 수 있다.

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

• JSX 구문에 표현식(값을 평가하는 것)이 아닌 실행문(if문, switch/case 문, 반복문 등)을 사용할 수 없다. JSX 구문 밖에서는 실행문(execution statement)를 사용할 수 있다.

 

 

Component

• SafeAreaView, Text 등에 해당
• 컴포넌트는 여러 속성(property)과 하나 이상의 자식 컴포넌트를 가질 수 있다.
• XML parser는 XML 표현의 컴포넌트를 React.createElement(컴포넌트_이름, 속성, 자식_컴포넌트) 자바스크립트 코드로 변환해준다.
• React.createElement는 컴포넌트를 가상 DOM 객체로 만든다.

 

 

조건이 있는 JSX 구문

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

export default function App(){
  const isLoading = true
  if(isLoading){
    return(
      <SafeAreaView>
        {isLoading && <Text>Loading ...</Text>}
        {!isLoading && <Text>Hello JSX World!</Text>}
      </SafeAreaView>
    )
  }

• JSX 구문 내부에서 중괄호({})를 사용하여 if문을 단축 평가 형태로 구현한 것이다. isLoading 값이 true일 경우 undefined를 반환하는데, undefined 또는 null은 무시하면 되는 올바른 JSX 문이 된다.

npm run android

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

export default function App(){
  const isLoading = true
  const children = isLoading ? (
    <Text>Loading ...</Text>
  ) : (
    <Text>Hello JSX World!</Text>
  )
  return <SafeAreaView>{children}</SafeAreaView>
}

• 삼항 연산으로 true 또는 fasle에 따라 변수에 JSX 구문을 담아 변수를 JSX 구문에서 중괄호({})를 통해 사용하는 것으로도 구현할 수도 있다.

 

 

배열과 JSX 구문

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

export default function App(){
  const children = [
    <Text>Hello World!</Text>,
    <Text>Hello World!</Text>,
    <Text>Hello World!</Text>
  ]
  return <SafeAreaView>{children}</SafeAreaView> // 부모 컴포넌트의 자식 컴포넌트 형태
}

• XML 문법에서는 부모 요소 없이 여러 개의 XML 요소를 만들 수 없는데, JSX 문에서도 여러 자식 컴포넌트도 XML 원칙을 따라야 한다.
• 따라서 배열 변수에 담긴 JSX 구문은 <SafeAreaView> 컴포넌트와 같은 부모 컴포넌트의 자식 컴포넌트로 만들어야 한다.

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

export default function App(){
  const children = [1,2,3].map((i) => <Text>Hello World! {i}</Text>)
  return <SafeAreaView>{children}</SafeAreaView>
}

• Array 클래스의 map 메소드(Array.map)를 사용하여 컴포넌트 배열을 생성하고, 컴포넌트를 출력한다.

npm run android

import React from 'react';
import {SafeAreaView, Text} from 'react-native';

export default function App(){
  const children = new Array(100).fill(null).map((notUsed, index) => <Text>Hello World! {index}</Text>)
  return <SafeAreaView>{children}</SafeAreaView>
}

• 자바스크립트의 Array 클래스를 사용해서 크기가 100인 배열을 NULL로 모두 초기화하여 생성한다.
• NULL로 초기화하는 이유는 new Array(개수)로 생성하는 경우 특정 개수만큼 undefined로 채워진 배열이 생성되는데, undefined 아이템이 있는 배열에는 map을 사용할 수 없기 때문이다.

 

 

Reference

• Do it! 리액트 네이티브 앱 프로그래밍