UI 구조를 선언한다
태그 사이에 자식, 속성에 값, 중괄호 안에 JavaScript 표현식을 둔다.
<Button>{price}원</Button>
JSX는 HTML이 아니라 UI를 만드는 JavaScript 입력이다
개발자는 태그처럼 구조를 적지만, 빌드 도구는 이를 React element를 만드는 호출로 바꾼 뒤 React가 화면 반영을 결정한다.
실행 가능한 JS가 된다
Vite의 변환 과정이 JSX 문법을 브라우저가 처리할 JavaScript 호출로 컴파일한다.
jsx(Button, { children: … })
React가 변경을 반영한다
생성된 element의 type과 props를 바탕으로 이전 결과와 비교해 필요한 DOM만 갱신한다.
type · props · children
읽는 순서: 태그 모양에 속지 말고 ‘구조 → 값 → 변환 결과’로 보면 JSX 규칙과 오류 위치가 선명해진다.