아래 코드처럼 부모-자식 관계로 구성된 HTML 요소들은 코드가 복잡해지는 문제가 있다.

<ul>
	<li>
		<a href='http://www.google.com'>
	</li>
</ul>

React.createElement 호출로 구현하면 아래와 같다. 직관적으로 이해하겠는가? 아니다.

const CE = React.createElement;

const rootVirtualDOM = CE('ul', null, [
	CE('li', null, [
		CE('a', { href: 'http://www.google.com', target: '_black' }, [
			CE('p', null, 'go to Google'),
		]),
	]),
]);

리액트 팀은 이러한 React.createElement 호출의 복잡성을 해결하고자 JavaScript 언어에 없는 JSX 기능을 언어 확장 형태로 추가했다. JSX 버전으로 다시 작성하면 이렇다.

const rootVirtualDOM = (
	<ul>
		<li>
			<a href='http://www.google.com'>
				<p>go to Google</p>
			</a>
		</li>
	</ul>
);

JSX

JSX는 'JavaScript XML'의 줄임말로서 XML 구문에 JavaScript 코드를 결합하는 용도로 만들어진 구문이다. 개발자는 React.createElement 호출 코드를 여러 번 작성하는 대신 훨씬 간결한 JSX 코드만 작성하면 되므로 개발 생산성이 크게 향상된다.

XML

XML 규약은 넘어가겠다. 알아야 할 점은 웹 브라우저의 HTML 구문 분석기는 HTML4 등 하위 호환성을 보장하므로 XML 규약에 조금 어긋나게 HTML을 작성해도 되지만, 리액트에서 JSX 구문을 작성할 때는 XML 규약을 엄격하게 준수해야 한다.

예를 들어, HTML4에 익숙한 개발자가 스스로 닫는 태그 형태 <input type="text">를 지키지 않았을 때 리액트의 JSX 구문 분석기는 코드를 이해하지 못한다. 반드시 스스로 닫는 태그를 <input type="text" /> 사용해서 XML 규약을 준수해야 한다.