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