소개

React를 학습하고 JSX에 대해 이해가 얕아서 이번에 간단하게 정리해 보았습니다.

JSX란?

「JSX」란, 「JavaScript XML」의 약어이며, JavaScript의 확장 언어이다.
React의 컴퍼넌트내에서 마크업 언어를 기술하기 위한 HTML인 구문이 사용 가능.

왜 JSX를 사용합니까?

React의 특징으로 HTML 태그를 포함 할 수 있습니다.
브라우저에 화면을 그릴 때 HTML 문서 언어로 자바 스크립트에서 HTML 변환하고 있습니다.

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

예를 들어, 위의 설명이 있었기 때문에 이들을 읽을 때 React는 React.createElement 구문을 사용하여 어떤 HTML인지 정의해야합니다. 그렇게하면 매번 React.createElement를 작성하는 것이 어렵습니다

그럴 때, JSX의 구문으로 쓴 편이 깨끗이 한다.

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

이 두 구문은 외관이 다르더라도 출력 결과는 동일합니다. 이것을 등위 구문이라고 부른다.
HTML의 기술에 익숙하고, 매번 React.createElement 구문도 쓰는 것은 힘들기 때문에 JSX를 사용해 갑시다!

JSX는 무엇을하고 있습니까?

JSX는 자바 스크립트로 변환

컴파일시,
1.JSX → React.createElement의 식으로 변환

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

↓

React.createElement(
  MyButton,
  {color: 'blue', shadowSize: 2},
  'Click Me'
)

2.React 요소 생성

React 공식
일본 제일 알기 쉬운 React 입문【기초편】JSX의 기법