1. JSX란?

-JavaScript를 확장한 문법으로 JavaScript에 XML을 추가한 문법으로

const element = <h1>Hello, world!</h1>

위와 같은 형태를 지닌다.

-React는 별도의 파일에 Markup, Logic으로 분리하는 대신, Component라는 둘 모두를 포함하는 연결된 유닛으로 분리한다.

-React에서 필수적으로 JSX 사용을 요구하지는 않는다. 다만, JavaScript code 내부의 UI 작업시 시각적으로 도움이 되는 것으로 알려져있다.

2. JSX에 표현식 포함하기

const name = "sparata12"
const element = <h1>Hello, {name}</h1>;

ReactDOM.render {
	element,
    document.getElementByID("root")
}

위와 같은 식처럼 JavaScript 표현을 { }로 묶어서 포함시키는 것이 가능하다.

3.JSX 표현식

Compile이 끝난 뒤 JSX 표현식이 정규 JavaScript 함수 호출이 되고, JavaScript 객체로 인식 된다.

function getGreeting(user) {
	if(user) {
    	return <h1>Hello, {formatName(user)}!</h1>;
    }
    return <h1>Hello, Stranger.</h1>;
}

위와 같이 조건문인 if문이나 반복문인 for문 내에서 JSX를 사용할 수 있으며, 변수에 할당하거나 매개 변수로 전달하거나 함수에서 반환이 가능하다.

4. JSX 객체 표현

Babel은 JSX를 React.createElement( ) 호출로 Compile한다.

1)

const element = (
	<h1 className = "greeting">
  		Hello, world
  	</h1>
);

2)

const element = React.createElement (
	'h1',
    {className : 'greeting'},
    'Hello, world'
);

1)과 2)는 동일하다.

React. createElement( ) : 버그가 없는 코드를 작성하는데 도움이 되는 몇가지 검사를 수행하며, 기본적으로 아래와 같은 객체를 생성합니다.

const element = {
	type : 'h1',
    props : {
    	className : 'greeting',
        children : 'Hello, world'
    }
};

이러한 객체를 React Element라고 하고, 화면에서 보고 싶은 것을 나타내는 표현이라 생각하면 된다. React는 이 객체를 읽어 DOM을 구성하고, 최신 상태로 유지하는 데 사용한다.

//Babel : JavaScript Compiler. 프론트엔드의 빠른 발전에 따라 새로운 ESNext문법을 기존의 브라우저에 사용하기 위해 필수적이다. 특히, 하위 호환성은 Babel을 사용하는 이유기도 하다.