React.js #JSX란?

JSX

https://acadgild.com/blog/jsx-in-react

JSX는 리액트용이기 때문에 공식 자바스크립트 문법은 아니다. 자바스크립트의 확장 문법으로 XML과 매우 비슷하게 생겼으며, 이런 형식으로 작성된 코드는 나중에 코드가 번들링 되면서 babel-loader를 사용하여 자바스크립트로 변환한다. JSX 장점은 보기 쉽고 익숙하다는 것에 있다.

 

JSX

var hello = (
    <div>
        <h1>Hello world<b>!</b></h1>
    </div>
)

 

JSX 바벨 변환 후 자바스크립트 형식

var hello = React.createElement(
    "div",
    null,
    React.createElement(
        "h1",
        null,
        "Hello world",
        React.createElement(
             "b"
            null,
            "!"
        )
    )
);