JSX

JSX란?

• JSX = JavaScript XML
• JavaScript로 HTML 요소를 쉽게 작성할 수 있다.
• 런타임 시 일반 JavaScript로 변환된다. (Babel에 의해서 Transcompile된다.)

const myelement = <h1>JSX is good!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));

JSX의 특징

• 하나의 최상위 요소로 래핑되어야 한다. (최상단 element는 하나)

const App() => {
	return (
    	<>
        	<div>안녕</div>
            <div>JSX</div>
        </>
    )
}

• class 대신 className을 사용한다. (class라는 이미 JavaScript에서 예약어이므로)

<div className="greeting">안녕하세요!</div>

• 닫는 태그 필수

<input type="text" />
<br />
<img />

• HTML 태그 내에서 중괄호를 이용해 JavaScript 연산이 가능하다.

const App() => {
	const x = 10
    const y = 20
    return <div>{x} + {y} = {x + y}</div>
}

• 스타일을 object로 작성한다. (속성명은 camelCase로 적는다.)

<div style={{fontSize: 10, backgroundColor: 'blue'}}>안녕하세요!</div>