JSX

JSX는 자바스크립트의 문법을 확장한 형태이다.

이는 브라우저가 직접 해석할 수 없으므로, 브라우저에서 실행 가능한 순수 자바스크립트 코드로 변환하기 위해 바벨과 같은 컴파일러를 필요로 한다.

JSX는 HTML 태그를 포함할 수 있는 자바스크립트 코드로 보이지만, 실제로는 HTML이 아니다.

 

리액트에서 자주 사용되며, JSX를 사용하면 다음과 같이 UI 컴포넌트를 보다 직관적으로 작성할 수 있다:

const element = <h1>Hello, world!</h1>;

위의 코드는 HTML과 유사해 보이지만, 실제로는 JSX로 작성된 것이다.

이 코드를 브라우저에서 실행하기 위해서는 바벨이 JSX 코드를 순수 자바스크립트 코드로 컴파일해야 한다.

이 과정에서 HTML과 자바스크립트 코드가 결합되어 실행 가능한 자바스크립트 파일이 생성된다.

따라서 개발자는 복잡하지 않게 UI 컴포넌트를 구성할 수 있다.