JSX

JSX는 HTML 문법과 자바스크립트 문법이 결합된 문법이라고 볼 수 있다. JSX는 다음과 같은 특징을 가진다.

 

• React 엘리먼트(element) 생성
• JavaScript를 확장한 문법

JSX는 React.createElement의 syntactic sugar이다. 

<div className="greeting" color={getColor()}>{isNew ? 'Nice to Meet you' : 'Hello'}</div>

 

위의 JSX 코드를 babel로 실행하면 다음과 같이 변한다.

 

// babel 실행 결과
React.createElement("div", {
    className: "greeting",
    color: getColor()
  }, isNew ? 'Nice to Meet you' : 'Hello');
}

 

JSX에서 중괄호를 열면 자바스크립트의 표현식을 사용할 수 있다. 여기서 중요한 것은 값과 표현식만 중괄호에 넣을 수 있다는 것이다. 그 이유는 babel 실행 결과를 보면 알 수 있다. 중괄호 안의 코드가 "color={getColor()}" 처럼 HTML의 어트리뷰트 위치에 있다면 React.createElement에서 객체로 묶인다. 객체 프로퍼티의 value는 값과 표현식만을 받을 수 있기 때문에 문은 사용할 수 없다. 또한 HTML 태그의 콘텐츠에 위치한 중괄호는 값을 가져야하기 때문에 마찬가지로 값과 표현식만이 사용될 수 있다. 따라서 중괄호 안에는 자바스크립트의 값과 표현식만이 올 수 있다.