[React] Babel과 JSX

이전 글에서 React와 ReactDOM을 사용한 React 코드를 작성해보았습니다.

http://yongyi1587.tistory.com/37  < React 기초 -React와 ReactDOM 라이브러리

React.createElement() 라는 API를 호출하여 HTML코드를 만들고

ReactDOM.render()를 호출하여 렌더링을 하였습니다.

이번 글에서는 JSX를 이용하여 element를 정의하는 법을 적어보려고 합니다.

JSX는 javascript의 확장으로 HTML과 비슷한 구문을 이용해 react element를 정의할 수 있게 해줍니다.

먼저 JSX를 사용하기 위해서는 Babel이 필요합니다.

---

1. Babel

모든 브라우저는 ES6나 ES7을 지원하지 않으며 JSX를 지원하지 않습니다.

그렇기 때문에 브라우저가 해석이 가능한 코드로 변환하여야 하고

그 일을 하는것이 Babel입니다. 이런 변환 작업을 트랜스파일링이라 부릅니다.

http://babeljs.io/   << Babel 공식 홈페이지

위 사진처럼 babel 홈페이지에서는 ES6문법을 ES5문법으로 즉시 변경하고 확인할 수 있습니다.

Babel은 JSX 처리 표준이며, Reacr, ReactDOM과 마찬가지로 CDN으로 추가 후 쉽게 사용할 수 있습니다.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

지금까지 script 태그를 작성할 때 <script type=text/javascript>를 사용하였다면

이번글부터 <script type=text/babel>을 사용하겠습니다.

코드를 통해 비교해보겠습니다.

---

2. React.createElement vs JSX

2-1. React.createElement

const element = React.createElement(
"div",
null,
"React"
)

2-2. JSX

const element = <div>React</div>

이처럼 React.createElement를 호출하지 않고도 element를 쉽게 만들수 있습니다.

---

3. JSX 특징

1. Component의 children으로 Component를 추가 할 수 있습니다.

2. javascript에서 class는 예약어이므로 className 속성을 사용합니다.

3. javascript의 중괄호 { } 를 사용하여 값을 넣을 수 있습니다.

const Message = props => <div>{props.children}</div>    // 중괄호를 사용한 parameter값 삽입

Message라는 Component를 생성하였고 그 내용으로는 parameter 1개를 받아 div를 만들게 됩니다.

const element = (
	// class가 아닌 className 속성
	<div className="container">

		//Component의 children Component
		<Message>Hello World
		<Message>Goodbye World</Message>
		</Message>
	</div>
)

---

Babel을 사용하여 모든 브라우저 호환이 가능하도록 트랜스파일링을 하며

JSX를 사용하게 되면 쉽게 Virtual DOM을 생성할 수 있습니다.