JSX / Babel

※ JSX(JavaScript extension)란

- JavaScript의 확장 문법

- HTML 문법을 JavaScript 코드 내부에 적은 것.

- 빌드 시 Babel에 의해 자바스크립트로 변환됩니다.

- JavaScript 코드를 HTML처럼 표현할 수 있어 가독성에 좋습니다.

- JSX는 React element를 생성합니다.

---

※ JSX 문법

1. attribute에는 따옴표("") 또는 중괄호({})만 쓸 수 있습니다.

// 따옴표 사용 : 문자열 리터럴 정의
const element = <div tabIndex="0"></div>;
// 중괄호 사용 : JavaScript 표현식 삽입
const element = <img src={user.avatarUrl}></img>;
// 중괄호 사용 : 변수 또는 함수 삽입
const name = 'HyePark';
const element = <div>{name}</div>;
// 함수 삽입
function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = <h1>Hello, {formatName(user)}!</h1>;

2. HTML attr이름 대신 camelCase 명명 규칙 사용.

- JSX 표현식은 HTML보다 JavaScript에 가깝기 때문에 camelCase를 사용합니다.

ex) <div class="sample"/> 이 아니라 <div className="sample"/>

 

3. 태그는 항상 닫혀 있어야 합니다. '/>'

ex) <br> 이렇게 작성할 경우 오류가 발생합니다. 반드시 <br/>과 같이 태그를 닫아주어야 합니다.

---

※ JSX 객체

React.createElemnet() 함수를 호출함으로써 Babel이 JSX를 컴파일합니다.

작성은 아래와 같이 두 가지 방법으로 가능합니다.

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

// 또는

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

React.createElemnet() 은 몇 가지 검사를 수행하여 버그가 없는 코드를 작성하고, 아래와 같은 객체를 생성합니다.

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

이러한 객체를 "React 엘리먼트"라고 합니다.

React는 이 객체를 읽어서, DOM을 구성하고 최신 상태로 유지합니다.

---

※ Babel이란

- 바벨은 JavaScript 컴파일러이다.

- 바벨은 ECMAScript 2015+ code를 현재 및 예전 브라우저 환경에서 하위 호환 버전의 자바스크립트 코드로 변환하는 데 주로 사용되는 도구(toolchain=프로그램 개발 도구들의 집합)입니다.

최신 버전의 자바스크립트 문법을 브라우저가 이해하지 못하기 때문에 Babel이 브라우저가 이해할 수 있는 문법으로 변환해 줍니다.

* ECMA 버전 변화 : ES3 -> ES5 -> ES6(ES2015) -> ES7(ES2016)

// Babel Input: ES2015 arrow function
[1, 2, 3].map(n => n + 1);

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

+ babel-polyfill

*별도 설정 필요

- 바벨을 사용한다고 해서 자바스크립트 최신 함수를 사용할 수있는 것이 아니다.

바벨은 문법을 변환해주는 역할만 할 뿐. polyfill은 프로그램이 처음에 시작될 때 현재 부라우저에서 지원하지 않는 함수를 검사하여 각 object의 prototype에 붙여주는 역할을 합니다.

즉, 바벨은 컴파일 타임에 실행되고, polyfill은 런 타임에 실행됩니다.