JSX는 React가 만들었지만, React에 묶여 있지 않은, 독립적인 문법 확장이다.

핵심 원리는 간단하다. 트랜스파일러가 JSX를 보면 그냥 함수 호출로 변환할 뿐이다.

<div className="box">hello</div>

↓ 변환 결과

jsx('div', { className: 'box', children: 'hello' })

이 jsx라는 함수를 어디서 가져올지는 설정으로 정한다. 그게 jsxImportSource이다.

// tsconfig.json

{ "jsx": "react-jsx", "jsxImportSource": "react" } // React의 jsx()

{ "jsx": "react-jsx", "jsxImportSource": "preact" } // Preact의 jsx()

{ "jsx": "react-jsx", "jsxImportSource": "solid-js" } // Solid의 jsx()

jsx 함수가 뭘 하는지는 각 라이브러리 마음이다:

• React: 가상 DOM 객체 생성
• Preact: React와 거의 같지만 3KB짜리 구현
• Solid: 가상 DOM 없이 실제 DOM + 반응성 시스템으로 컴파일
• Vue: 템플릿 대신 JSX를 옵션으로 지원