JSX

JSX(JavaScript eXtension): 자바스크립트 확장

 

JSX는 JavaScript 안에서 HTML 문법을 사용해서 view를 구성할 수 있게 도와주는 JavaScript문법이다.

 

React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 JavaScript로 변환된다.

HTML과 매우 흡사하긴 하지만, XML을 기반으로 한데다 Javascript 내부에서 사용하다보니 불가피하게 생긴 차이점이 몇가지 있다.
- className: HTML요소에 class값을 정의할 때, 원래 HTML에서는 <p class="container"></p>과 같이 하면 되었지만, class라는 단어가 ECMAScript6의 클래스 문법과 겹치는 예약어이기 때문에 대신에 className로 사용한다.
- htmlFor: 위와 같은 이유로 루프문 예약어와 겹치는 for은 htmlFor로 사용한다.
- onClick: 요소에서 이벤트를 핸들링하는 onclick 등의 단어들은 onClick처럼 카멜표기법으로 표기해야 한다.
- JSX 내부에서도 JS를 사용할 수 있다. 중괄호{} 속에서 JS코드를 처리한다.

 

https://ko.reactjs.org/docs/introducing-jsx.html

JSX 소개 – React