JSX= JavaScript + XML

XML(extensible Markup Language): 태그 이름을 자유롭게 지을 수 있는 언어
XML 코드는 마치 자바스크립트나 타입스크립트 문법에 XML 구문이 있는 것처럼 사용

JSX : JavaScript XML 줄임말로 React.createElement 호출 코드를 좀 더 다순 간결하게 만들수 있다.

HTML 마크업 언어 : XML 마크업 언어의 부분 집합, 태그나 속성을 마음대로 확장 할수 없다. 

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

컴포넌트는 여러개의 속성과 하나 이상의 자식 컴포넌트를 가진다.

가상 DOM 객체 = createElement(컴포넌트 이름, 속성 객체, 자식 컴포넌트)

 

표현식: JSX 구문의 자바스크립트 코드는 반드시 return 키워드 없이 값을 반환해야 한다.
그러나 return 키워드 없이 값을 반환하는 구문을 표현식이라 말한다.

실행문 : 표현식의 반대 개념으로, 그자체가 값이 아니므로 JSX 코드 안에서 사용하지 못한다. 

// 가능한 표현식
//1
isLoading ? (<Text>1</Text>):(<Text>2</Text>)

//2
const child = [
<Text>1</Text>,
<Text>2</Text>,
<Text>3</Text>
]

return <SafeAreaView>{child}</SafeAreaView>

//3
<SafeAreaView>
{isLoading && <Text>1</Text>}
</SafeAreaView>

//4

const child = [1, 2, 3].map((i) => <Text>1 {i}</Text>)

return <SafeAreaView>{child}</SafeAreaView>