JSX를 'HTML 비슷한 문법'으로만 보는지, 아니면 트랜스파일 결과인 함수 호출과 React element 모델까지 이어 가는지 가르려는 질문이다.
JSX는 JavaScript 안에서 마크업처럼 UI 구조를 적게 해 주는 문법 확장이라, 브라우저가 직접 실행하지는 못한다. 빌드 단계에서 Babel·SWC 같은 트랜스파일러가 이를 classic runtime에선 React.createElement(type, props, ...children)로, automatic runtime(React 17+)에선 react/jsx-runtime의 jsx/jsxs 호출로 변환한다. 그 결과물은 객체 트리(React element)이고, React는 이 트리를 받아 가상 DOM·실제 DOM 작업을 이어 간다. JSX 식 하나가 단일 표현식으로 풀려야 하기 때문에 컴포넌트가 여러 형제 요소를 반환할 땐 부모나 Fragment로 감싸야 한다는 규칙도 여기서 나온다.
트랜스파일 결과를 직접 열어 보고 빌드 문제를 좁혀 본 경험이 있다면 변환 모델 이해의 효용으로 연결할 수 있다
JSX 런타임을 classic에서 automatic으로 옮기며 import 변화를 정리해 본 적이 있다면 설정 변경 사례로 엮을 수 있다
Fragment 사용 기준을 팀 컨벤션으로 정해 본 경험이 있다면 단일 표현식 규칙을 코드 스타일로 옮긴 사례로 말할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.