2.1

JSX란

JSX(JavaScript XML)는 자바스크립트 코드 안에서 HTML과 비슷한 문법을 사용해 UI를 정의할 수 있도록 도와주는 문법 확장(syntactic extension)입니다. 쉽게 말해, 자바스크립트 안에서 HTML처럼 생긴 코드를 쓸 수 있게 해주는 문법입니다.

JSX는 HTML처럼 보이지만 실제로는 HTML이 아니며, 웹 브라우저가 직접 이해할 수 있는 문법도 아닙니다. 대신 리액트가 JSX 코드를 자바스크립트 코드로 변환해서 실행합니다.

JSX가 없던 시절에는 리액트에서 UI를 만들기 위해 createElement() 함수를 직접 사용해야 했습니다. 예를 들어 다음과 같은 HTML 코드가 있습니다.

HTML

<div>
  <h1>Hello, React!</h1>
</div>