리액트에서 사용하는 자바스크립트 확장 문법이다.
JSX로 작성한 코드는 브라우저가 동작하는 과정에서 Babel
을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.
📌 HTML 태그를 그대로 사용하기 때문에 보기 쉽다
📌 HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작한다.
📌 모든 요소를 감싸는 최상위 요소가 필요하다.
ex) React Fragment : <>....</>
📌 JavaScript와는 다른 표기법이 있다.
ex) ❌ class ⭕ className
📌 Inline Styling이 가능하다.
ex) <div style={{color : "red"}}>Hello React</div>
📌 스스로 닫는 태그가 가능하다.
ex) <div>..</div>
→ <div ... />