# JSX in Action

## JSX 인터폴레이션 <a href="#jsx-interpolation" id="jsx-interpolation"></a>

JSX는 [JavaScript 표현식(expression)](https://mzl.la/2V7eeEx)을 중괄호(`{}`)로 묶어 데이터를 [인터폴레이션(Interpolation)](https://sass-lang.com/documentation/interpolation) 합니다. 즉, HTML 코드에서 데이터를 빼내 변수에 등록한 후, 변수를 HTML 코드에 연결해 구조를 구성 할 수 있다는 말입니다.

{% tabs %}
{% tab title="React JSX" %}

```jsx
// 데이터
let data = {
  headline: 'JSX 란?',
  abbrs: {
    jsx: 'JavaScript Syntax eXtension',
    html: 'Hyper Text Markup Language',
    ui: 'User Interface',
  },
}

// -----------------------------------------------------------------------

// React 요소: headline
const headlineElement = <h1>{data.headline}</h1>

// 데이터 변경(업데이트)
data = {
  ...data,
  headline: data.headline.replace('란?', '').trim(),
}

// React 요소: paragraph
// ※ 코드를 개행하고자 한다면? JSX 코드를 ()를 사용해 묶어 줍니다.
const paragraphElement = (
  <p>
    <abbr title={data.abbrs.jsx}>
      {data.headline.replace('란?', '').trim()}
    </abbr>
    는 JavaScript 문법 확장으로 구문이 <abbr title={data.abbrs.html}>HTML</abbr>
    과 유사합니다. React 애플리케이션 제작 시 꼭 <abbr>{data.headline}</abbr>가
    필요한 것은 아니지만, JavaScript로
    <abbr title={data.abbrs.ui}>UI</abbr>
    View를 구성하는 마크업하는 것은 매우 까다로우므로 특별한 경우가 아니라면
    <abbr>{data.headline}</abbr> 사용을 권장합니다.
  </p>
)

// React 요소: container
const constainerElement = (
  <div className="container paper">
    <div className="pattern">
      <div className="content">
        {headlineElement}
        {paragraphElement}
      </div>
    </div>
  </div>
)
```

{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="컴파일 된 HTML" %}

```markup
<div class="container paper">
  <div class="pattern">
    <div class="content">
      <h1>JSX 란?</h1>
      <p>
        <abbr title="JavaScript Syntax eXtension">JSX</abbr>는 JavaScript 
        문법 확장으로 구문이 <abbr title="Hyper Text Markup Language">HTML</abbr>과 
        유사합니다. React 애플리케이션 제작 시 꼭 <abbr>JSX</abbr>가 필요한 것은 아니지만, 
        JavaScript로 <abbr title="User Interface">UI</abbr> View를 구성하는 
        마크업하는 것은 매우 까다로우므로 특별한 경우가 아니라면 <abbr>JSX</abbr> 사용을 
        권장합니다.
      </p>
    </div>
  </div>
</div>
```

{% endtab %}
{% endtabs %}

#### 라이브 예제 <a href="#live-code-example" id="live-code-example"></a>

{% embed url="<https://codesandbox.io/s/jsx-in-action-01-yz8u5?file=/src/index.js>" %}


---

# 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-in-action.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.