자바스크립트의 확장 문법으로 XML
과 비슷하게 생겼다.
브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
//변환 전
function App(){
return (
<div>hello <b>react</b></div>
)
}
///변환 후
function App(){
return React.createElement("div", null, "hello", React.createElement("b", null, "react")) ;
}
1. 보기 쉽고, 익숙
HTML 코드를 작성하는 것과 비슷해 가독성이 높고 작성하기도 쉽다.
2. 더욱 높은 활용도
JSX에서는 HTML태그를 사용할 수 있을 뿐 아니라, 컴포넌트도 JSX 안에서 작성 할 수 있다.