JSX in Action

React 요소를 손쉽게 생성하는 방법!

JSX 인터폴레이션

JSX는 JavaScript 표현식(expression)을 중괄호({})로 묶어 데이터를 인터폴레이션(Interpolation) 합니다. 즉, HTML 코드에서 데이터를 빼내 변수에 등록한 후, 변수를 HTML 코드에 연결해 구조를 구성 할 수 있다는 말입니다.

React 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>
)

컴파일 된 HTML

<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>

라이브 예제