JSX는 JavaScript 안에서 HTML과 유사한 마크업을 작성할 수 있게 해주는 구문 확장입니다. 브라우저는 JSX를 이해하지 못합니다 — 컴파일러(Babel, SWC, esbuild)가 코드 실행 전에 이를 일반 함수 호출로 변환합니다.
무엇으로 컴파일되는가
jsx
el = ;
el = .(
,
{ : },
, name
);
그 결과는 UI를 기술하는 단순한 JavaScript 객체("React element")이며 — 아직 실제 DOM 노드가 아닙니다. React는 그 객체를 읽어 Virtual DOM을 구성합니다.
function Card({ user }) {
return (
<> {/* Fragment: 추가 <div> 없이 단일 루트 */}
<h2 className="name">{user.name}</h2> {/* camelCase: class가 아니라 className */}
{user.isAdmin && <Badge />} {/* {}는 임의의 JS 표현식을 삽입 */}
</>
);
}
className, onClick)를 사용합니다.{ }는 표현식(값, 삼항 연산, .map())을 삽입하지만, if 같은 **문(statement)**은 삽입할 수 없습니다.JSX는 단지 createElement를 위한 문법적 설탕(sugar)이므로, JSX로 할 수 있는 모든 것은 순수 JS로도 할 수 있습니다 — 단지 UI 코드를 그것이 생성하는 마크업처럼 읽히게 만들어 줄 뿐이며, 이는 중첩된 함수 호출보다 훨씬 읽기 쉽습니다.