[React] JSX (Javascript XML)

JSX에서는 html 문장을 변수에 저장할 수 있습니다.

그런데 이게 보면 함수나 변수의 정의 순서가 안맞는 것 같은데 괜찮나? 이게 자바스크립트의 장점(?) 중의 하나입니다. 어짜피 인터넷을 통하여 옮겨지기 때문에 누가 먼저 도착한다는 보장이 없어서 그냥 돌아가게 만들어 놓은 것 같습니다. (???)

그런데 그냥 문장만 변수에 저장하는 것이면 별로 유용하지 않을 것입니다. JSX가 유용한 이유 중의 하나는 javascript 표현식을 포함할 수 있다는 것입니다.

그래서 다음과 같은 것이 가능합니다.

JSX Represents Objects

설명

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

설명

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

설명

// Note: this structure is simplified
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};