JSX는 결국 React 객체로 바뀌기 때문이다.

• JSX는 JavaScript 표준 문법이 아니다. React만 가지는 특별한 문법으로, 브라우저에서 실행할 수 없다.
• 따라서 JSX를 JavaScript로 변환해야 브라우저에서 실행이 가능하다.

---

🤔 그래서 어떻게 변하는데?

다음과 같이 React 객체로 바뀐다.

// JSX
return (
  <div>
  	<h2>Title</h2>
  	<MyComponent data={data} />
  </div>
);

// React 객체
return (
  React.createElement(
    'div',
    {},
    React.createElement('h2', {}, 'Title'),
    React.createElement(MyComponent, { data: data })
  )
);
    

React.createElement(요소 이름, props 정보, 내부 요소1, 내부 요소2, ...)

❌ 만약 루트 요소가 여러 개라면?

다음과 같이 React 객체 여러 개를 반환하게 된다. 함수의 반환값은 여러 개의 객체일 수 없다.

// JSX
return (
  <div><div>
  <h2>Title</h2>
  <MyComponent data={data} />
);

// React 객체
return (
  React.createElement('div', {})
  React.createElement('h2', {}, 'Title')
  React.createElement(MyComponent, { data: data })
);
    

결론

JSX 요소 각각은 React 객체이며 하나의 객체만을 반환하기 위해서는 하나의 루트 요소만을 가져야 한다.