[2장 JSX] JSX란?

JSX는 자바스크립트의 확장 문법이며 XML과 비슷하게 생겼다 

코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환 된다 

function App(){
  return (
  	<div>
      Hello <b>react</b>
    </div>  
  );
}

이렇게 작성된 코드는 다음과 같이 변환된다 

"use strict";

function App() {
  return /*#__PURE__*/React.createElement("div", null, "Hello ", /*#__PURE__*/React.createElement("b", null, "react"));
}

만약 컴포넌트를 렌더링 할때마다 JSX코드를 작성하는것이 아니라 위 코드처럼 매번 React.createElement함수를 사용해야 한다면 매우 불편할것이다 

때문에 JSX를 사용하면 매우 편리하게 UI를 렌더링 할수 있다 

babeljs.io/repl#?browsers=defaults%2C%20not%20ie%2011%2C%20not%20ie_mob%2011&build=&builtIns=false&spec=false&loose=false&code_lz=GYVwdgxgLglg9mABAQQA6oBQEoDeAoRRAJwFMoQikMDEBIAHgBMYA3APhsMIAkSAbPnET0ARm1IBDaPQD0YzsJnN2hGlgDceAL5A&debug=false&forceAllTransforms=false&shippedProposals=false&circleciRepo=&evaluate=false&fileSize=false&timeTravel=false&sourceType=module&lineWrap=true&presets=env%2Creact%2Cstage-2&prettier=false&targets=&version=7.12.3&externalPlugins=

Babel · The compiler for next generation JavaScript