#2.5 JSX

 

JSX란?

 

HTML에서 사용한 문법과 흡사한 문법을 사용

HTML와 비슷해서 React 요소를 JSX로 만드는 게 개발자에게는 아주 쉽다.

 

JSX 방식

const title = 
	<h3 
    	id="title" 
        onMouseEnter = { () => { console.log('mouseEvent excuted') }}>
        "Hello Span"
    </h3>;

 

기존 방식

const span = React.createElement(
    "span",
    { id: 'sexy-span', style: { color: 'red' } }, 
    null,
	"Hello Span");

 

 

브라우저가 JSX를 이해할 수 있도록 BABEL을 설치해야 한다. 

일단은 연습 용이기 때문에 CDN 추가

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

그리고 script 태그에 text/babel 추가

<script type="text/babel">

 

babel 이 브라우저가 읽을 수 있는 코드로 변경해서 넘겨주는 과정이 숨겨져 있다.