JSX

JSX란?

JSX(JavaScript Syntax Extension)란 HTML 문법을 JavaScript 코드 내부에 쓴 것으로 JavaScript의 확장 문법이다.
JSX는 React Element를 쉽게 생성하기 위해서 고안된 확장된 JS문법으로서 UI가 어떻게 생겨야 하는지 설명하기 위해 React와 함께 사용하길 권장한다. JSX에는 JavaScript의 모든 기능을 사용할 수 있다.

JSX 사용 이유

React는 JSX사용을 필수로 하지 않지만 대부분의 개발자들은 UI 작업시 JSX를 사용하면 시각적으로 도움이 된다.

JSX

const name = "seulhee";
const element =  <h1> Good, {name} </h1>; // JSX

JSX의 중괄호 안에 유효안 모든 JavaScript 표현식을 넣을 수 있다.

JSX 또한 표현식이다. 컴파일이 끝나면, JSX 표현식이 정규 JavaScript 함수 호출이 되고 JavaScript 객체로 평가된다.

HTML 마크업에서 요소들과 차이가 있다. 예를 들어 class는 className이 된다. for이 아닌 htmlFor을 써야한다.

Babel은 JSX를 React.createElement() 호출로 컴파일한다.
Babel은 JavaScript 컴파일러로 작성된 자바스크립트 코드가 다른 버전의 자바스크립트 버전과 호환되도록 자바스크립트 문법을 변환해준다.

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

ReactDOM.render(element, document.getElementById('root'));

바벨을 거치면 아래와 같이 컴파일된다.

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

결과적으로 아래와 같이 렌더링된다.

<div id="root">
  <div>Hello, world!</div>
</div>

느낀점

참고

Introducing JSX
JSX in Depth
babel이란 무엇인가?