JSX

JavaScript XML

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.

HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.

• HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className이라는 단어를 사용한다.
• 마찬가지 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
• 또한 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.
• 기존의 HTML에서 주석은 <!-- COMMENT -->이렇게 했었지만 JSX에서는 {/*주석*/} 으로 표현한다.
• HTML Custom-Element는 <my-element>와 같이 표기했지만 React의 Custom Element는 <MyElement />와 같이 Pascal Case로 표기한다. 닫는 태그에는 꼭 명시적으로 /> 표기를 해준다. [1]
• JSX 내부에서도 JS를 사용할 수 있다. {}로 불러온다. {console.log(this.props)} 같은 식이다.[2]

이 JSX 위주의 프론트엔드 라이브러리로는 Preact, SolidJS, Inferno 등이 있으며, Vue.js 등의 자체적인 포멧을 사용하거나 Svelte 같이 JSX 사용과 거리가 먼 라이브러리 및 프레임워크 또한 JSX를 사용할 수 있는 방법이 존재한다.

어도비의 Photoshop, After Effects등의 프로그램에서 쓰이는 스크립트의 확장자명도 jsx이지만 이 jsx와는 자바스크립트라는 것 이외의 관련이 없다.