JSX 없이 사용하는 React

React를 만들 때 JSX는 필수가 아닙니다. 특히 빌드 환경에서 컴파일 설정을 하고 싶지 않을 때 JSX 없이 React를 사용하는 것은 편합니다.

각 JSX 엘리먼트는 React.createElement(component, props, ...children)를 호출하기 위한 것입니다. 그래서 JSX로 할 수 있는 것들은 Javascript로도 할 수 있습니다.

React를 사용할 때 JSX는 필수가 아닙니다. 빌드환경에서 컴파일 설정을 하고 싶지 않을 때 사용하면됩니다.

jsx element → React.createElement(component, props, …children);

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

const root = REactDOM.createRoot(docuemnt.getElementById('root');
root.render(<Hello toWhat="World" />);

아래 코드로 컴파일됩니다.

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

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