[React] JS 말고 "JSX" 를 사용하는 이유

React 공식 문서를 참조했습니다.

👉 https://ko.reactjs.org/docs/react-without-jsx.html

문법 설탕

React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. 또한 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시할 수 있게 해줍니다.

예를 들어 다음의 JSX로 작성된 코드는

class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.toWhat}</div>;
  }
}

ReactDOM.render(
  <Hello toWhat="World" />,
  document.getElementById('root')
);

아래처럼 JSX를 사용하지 않은 코드로 컴파일될 수 있습니다.
JSX를 사용하지 않으면 React.createElement(component, props, ...children)를 모두 적어주어야 합니다.

class Hello extends React.Component {
  render() {
    return React.createElement('div', null, `Hello ${this.props.toWhat}`);
  }
}

ReactDOM.render(
  React.createElement(Hello, {toWhat: 'World'}, null),
  document.getElementById('root')
);

😀 두가지를 비교해 보면 React 사용시 앞에 코드로 JSX를 사용하는 것이 훨씬 직관적이고 가독성이 좋다는 것을 알 수 있습니다.