[React] 04. JSX

🎈 JSX 란?

리액트에서 사용하는 자바스크립트 확장 문법이다.

JSX로 작성한 코드는 브라우저가 동작하는 과정에서 Babel 을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

1. JSX의 장점

📌 HTML 태그를 그대로 사용하기 때문에 보기 쉽다
📌 HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작한다.

2. JSX의 특징

📌 모든 요소를 감싸는 최상위 요소가 필요하다.
ex) React Fragment : <>....</>

📌 JavaScript와는 다른 표기법이 있다.
ex) ❌ class ⭕ className

📌 Inline Styling이 가능하다.
ex) <div style={{color : "red"}}>Hello React</div>

📌 스스로 닫는 태그가 가능하다.
ex) <div>..</div> → <div ... />