# JSX is React Element

## JSX 란?

[JSX(JavaScript Syntax eXtension)](https://facebook.github.io/jsx/)는 XML과 유사한 구문 확장으로 ECMAScript 표준과 관련이 없습니다. JSX는 React 앱 제작 과정에서 반드시 필요한 것은 아니지만, JavaScript 추상 객체 만으로 UI View를 구성하는 마크업을 구현하는 것은 매우 복잡하고 불편하므로 특별한 상황이 아닌 경우 JSX를 사용하는 것이 권장됩니다. 🤨

![](/files/-MUvW70jGbk-0W93_90Z)

JSX는 Babel JavaScript 컴파일러에 의해 React 요소(Element)로 컴파일 됩니다.

{% tabs %}
{% tab title="JSX → React 요소" %}

```jsx
<button type="button" className="button button__resolve">승인</button>

// ⬇ 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는 필수? <a href="#is-jsx-required" id="is-jsx-required"></a>

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 = (
  <div className="container">
    <h1 lang="en">
      <abbr title="JavaScript eXtension">JSX</abbr>
    </h1>
  </div>
)
```

{% endtab %}
{% endtabs %}

## Babel REPL

[Babel REPL](https://babeljs.io/repl/) 서비스는 JSX 코드가 React API 코드로 어떻게 변경되는 지 실시간으로 보여줍니다. 왼쪽 텍스트 필드에 JSX 코드를 입력하면, 오른쪽 텍스트 필드에 React API 코드로  변경되어 출력됩니다. (왼쪽 사이드 바 `react` 체크)

![](/files/-MUvcLdILFPOKXpZVQRX)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://yamoo9.gitbook.io/learning-react-app/learning-history/jsx-is-react-element.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.