# JSX is React Element
## JSX 란?
[JSX(JavaScript Syntax eXtension)](https://facebook.github.io/jsx/)는 XML과 유사한 구문 확장으로 ECMAScript 표준과 관련이 없습니다. JSX는 React 앱 제작 과정에서 반드시 필요한 것은 아니지만, JavaScript 추상 객체 만으로 UI View를 구성하는 마크업을 구현하는 것은 매우 복잡하고 불편하므로 특별한 상황이 아닌 경우 JSX를 사용하는 것이 권장됩니다. 🤨
JSX는 Babel JavaScript 컴파일러에 의해 React 요소(Element)로 컴파일 됩니다.
{% tabs %}
{% tab title="JSX → React 요소" %}
```jsx
// ⬇ Babel 컴파일러에 의해 React 요소로 컴파일 됨
React.createElement(
'button',
{
type: 'button',
className: 'button button__resolve'
},
'승인'
)
```
{% endtab %}
{% endtabs %}
{% hint style="info" %}
React 요소는 실제 DOM 요소가 아니라, DOM 요소를 [추상화](https://ko.wikipedia.org/wiki/%EC%B6%94%EC%83%81%ED%99%94_\(%EC%BB%B4%ED%93%A8%ED%84%B0_%EA%B3%BC%ED%95%99\)) 한 JavaScript 객체입니다.
```javascript
{
type: 'button',
props: {
type: 'button',
className: 'button button__resolve',
chlidren: ['승인']
}
}
```
{% endhint %}
## JSX는 필수?
JSX를 사용하지 않아도 React 앱을 구성하는 데 아무런 문제가 되지 않습니다. 다음과 같이 React 요소를 생성하고 조립하면 되기 때문입니다. 앞선 예제보다 다소 복잡한 DOM 구조를 React 요소로 생성한 코드입니다.
{% tabs %}
{% tab title="React API" %}
```jsx
const containerElement = React.createElement(
'div',
{
className: 'container'
},
React.createElement(
'h1',
{
lang: 'en'
},
React.createElement(
'abbr',
{
title: 'JavaScript eXtension'
},
'JSX'
)
)
)
```
{% endtab %}
{% endtabs %}
물론 JSX를 사용하면 코드가 직관적이고, HTML 문법과 비슷해 읽기 쉽고 수정하기도 편합니다. 🙂
{% tabs %}
{% tab title="JSX" %}
```jsx
const containerElement = (
JSX
)
```
{% endtab %}
{% endtabs %}
## Babel REPL
[Babel REPL](https://babeljs.io/repl/) 서비스는 JSX 코드가 React API 코드로 어떻게 변경되는 지 실시간으로 보여줍니다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 React API 코드로 변경되어 출력됩니다. (왼쪽 사이드 바 `react` 체크)
