JSXって何?

JSXは、htmlのように見える画面上でレンダリングする要素を生成します.内部に{}で囲まれた式を作成できるのが特徴です.

const name = "alajillo"
const jsxTest = <h1 className={header__name}>{name}</h1>

{}で囲まれた式は、タグ内部のコンテンツやプロパティとしても使用できます.ここの特別な点はclassをclassNameとして使用することです.なぜならclassはJavaScriptで予約言語として使用されるからです.

JSXの脆弱性防御方法

また、JSXはドメイン間スクリプト(XSS)を予防することもできます.
簡単に言えば、XSSは、入力値に特定の動作のコードを加えることによってアプリケーションを意図的に操作するハッカー方法である.
XSSを防止する原理は、JSXはレンダリング時にすべてのコンテンツをStringに変換するので、コードを入力してもコードStringだけでなくコードStringに変換します.

JSXをバーベルにしたら?

また、最新の構文をサポートしていないブラウザのコードを、最新の構文を使用した古いコードのBabelに変換して、JSXを異なる方法で表すこともできます.
上はJSX、下はバーベルでJSXを対象として表示します.

const element = (
<태그이름 속성>
컨텐츠
</태그이름>
)

const element = React.createElement(
'태그이름',
{속성},
'컨텐츠 내용'
)

バーベルで変換されたものは、対象の形になります.

仮想ドメインとJSXの意味

JSXなどで作成したdom形式のオブジェクトにより仮想Domを形成する.仮想ドメインは実際のドメインではなく,実際のドメインが操作すべき状況を判断する役割を果たす.
例えば、仮想ドメインを介して

<header> 제목 </header>
<main> 내용 </main>

これらのDomを管理するときにヘッダーラベルでタイトルが変更された場合、

 const elementDom = {
	header : {
		tagName : 'header'
		content : '제목' => '새로운 제목'
	},
	main : {
		tagName : 'main'
		content : '내용'
	}
}

この形式のVirtualDomは、ヘッダのコンテンツ値が変更されたことを検出し、変更が必要なヘッダのコンテンツ値に対応するDomのみが変更されます.

const header = document.quearySelector('header')
window.addEventListener('custonEventValueChange',()=>{
	header.innerText = "새로운 제목"
})

上のコードと何が違いますか?
機能的に違いはありません.バニラJavaScriptを使用してもProxyオブジェクトを使用して変化を検出することができ、特定の部分のDomのみが操作できます.
しかしreactを使うのは便利だからです.
React-Domライブラリには、バニラJavaScriptのようなコードがあるはずです.
Reactを使用すると、UIの表示部分を簡単に作成および変更できます.
JSXは、reactの仮想ドメインを作成するために必要なオブジェクトをより直感的に作成するのに役立ちます.