이번에는 JavaScript의 XML인 JSX
에 대해서 알아봅니다.
JSX
는 위에서 언급했다시피 JavaScript의 XML입니다. JavaScript 문법의 확장판으로 리액트에서 요소를 제공합니다. 그리고 JSX
의 특징은 아래와 같습니다.
첫째로, React.createElement
와 JSX
를 비교하였을 때, JSX
의 가독성이 훨씬 뛰어나기 때문입니다.
둘째로는 Babel
과 같은 컴파일 과정에서 문법적인 오류를 인지하기 쉽기 때문입니다.
JSX
의 문법으로 작성된 코드는 순수한 JavaScript로 컴파일하여 사용할 수 있습니다. 이를 가능하도록 하는 것이 바로 Babel
입니다.
위와 같이 Babel
공식 홈페이지에서는 Babel
을 통해 JSX
가 어떠한 방식으로 컴파일이 되는지 확인할 수 있습니다.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Babel
홈페이지에 나와있는 CDN 주소입니다. 이를 통해, 별도의 설치 없이 Babel
사용이 가능합니다.
<script type="text/babel"> // 아래에 JSX 문법 작성
ReactDOM.render(
<div>
<div>
<h1>주제</h1>
<ul>
<li>React</li>
<li>Vue</li>
</ul>
</div>
</div>,
document.querySelector('#root')
);
</script>
위와 같이 JSX
문법으로 코드를 작성하면 끝입니다. 이를 통해, Babel
이 자동으로 JavaScript 문법으로 컴파일을 진행하게 됩니다.
()
로 감싸야합니다.<>자식 요소</>
를 사용합니다. 이를 Fragment라 부릅니다.{표현식}
을 이용합니다.