패스트캠퍼스 '한 번에 끝내는 React의 모든 것' 수강 후 정리.
const element = <h1 className='title'>Hello, world!</h1>;
문자도 HTML도 아닌 JavaScript의 확장 문법.
근본적으로 JSX는 React.createElement(component, props, ...children)
함수를 매번 작성하는 대신 보다 직관적이고 효율성 높게 작성할 수 있는 문법적 설탕이다.
위의 JSX 코드는 바벨 등의 컴파일러에 의해 아래와 같이 변환된다.
const element = React.createElement(
'h1',
{className: 'title'},
'Hello, world!',
)
컴파일러.
ES6+ 혹은 React의 JSX, 타입스크립트와 같이 구버전의 브라우저가 해석하지 못하거나 다른 언어를 분류되는 언어들에 대해서도 정상적으로 동작할 수 있도록 ES6+는 ES5 문법으로, JSX의 경우 위와 같이 React.createElement
로 변환하여 준다.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Static Template</title>
</head>
<body>
<!-- react -->
<script
crossorigin
src="https://unpkg.com/react@17/umd/react.development.js"
></script>
<script
crossorigin
src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"
></script>
<!-- babel -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<div id="root"></div>
<script type="text/babel">
const $root = document.getElementById("root");
const $h1 = <h1 className="title">Hello, World!</h1>;
ReactDOM.render($h1, $root);
</script>
</body>
</html>
CDN을 통해 Babel을 설치하고, script
태그에 type='text/babel'
을 설정하여 바벨이 해당 스크립트를 읽고 변환해야 한다는 것을 알려준다.
const className = 'title';
const innerText = 'Hello, world!';
const element = <h1 className={className}>{innerText}</h1>;
const className = 'title';
const innerText = 'Hello, world!';
const element = <h1 className={className}>{innerText}</h1>;
const $h1 = element; // JSX 표현식을 변수에 할당 가능.
const div1 = <div className='div' />
const div2 = (<div className='div'>
<h1>Hello!</h1>
</div>
);
const titleClassName = 'title';
const text = 'Hello, world!';
const props = { className: titleClassName, children: text };
const element = <h1 {...props} />;