React.js - Babel과 JSX의 특징

1. Babel이란?
: ES6로 작성된 code를 ES5로 변환해주는 것이다. 웹 사이트를 만들 때 여러가지 브라우저를 호환해야하는데 최신 브라우저인 chrome, firefox는 ES6를 지원하지만 구 버전 브라우저와 internet explorer를 지원하지 않기 때문에 변환이 필요하다.

2. ES6 Class
: 클래스는 ES6에 새로 도입된 문법으로 클래스를 선언할 경우에는 아래와 같이 선언할 수 있다. 클래스에는 생성자와 메소드가 존재하고, 자바스크립트 안에서는 메소드만 생성할 수 있다.

class className {
    constructor(height, width) {
    	this.height = height;
        this.width  = width;
    }
}

 

3. JSX란?

: JavaScript 코드에서 HTML 형식 문법을 그대로 작성할 수 있다. 리액트 JSX는 XML같은 문법을 Native JavaScript 문법으로 변환해준다. ()를 사용하지 않아도 오류는 발생하지 않으나 가독성을 위해 사용을 권장한다.

 

4. JSX의 특징

- 모든 JSX 형태의 코드는 Container Element가 없으면 에러가 발생하기 때문에 Container Element 안에 포함되어야 한다. 

render() {
    return {
	<div> // container element 안에 포함시키지 않으면 에러 발생
	   <h1>Hi</h1>
	   <h2>Error</h2>
	</div>
    }
}

- JSX 안에서 JavaScript를 표현하고 싶을 때는 {}(brackets)으로 감싸서 사용한다.

render() {
   let text = "Hello React!";
   return (
      <div>{text}</div>
   );
}

※ let?

: ES6의 새로운 문법으로 var은 함수 유효 범위를 갖지만 let은 블록 범위 내에서만 변수를 선언한다.

- JSX 내에서 스타일을 설정할때는 String 형식을 사용하지 않고, key가 camelCalse인 객체를 사용한다.

- JSX 내에서 주석을 작성 시에는 { /* .... */ } 형식으로 작성한다. 주석은 Container Element 안에 작성되어야만 한다.