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를 사용하는 것이 훨씬 직관적이고 가독성이 좋다는 것을 알 수 있습니다.