[JS] React.js JSX 없이 React 사용하기

React Without JSX

JSX는 React 를 사용하는데 필수 조건이 아닙니다. JSX를 사용하지 않고 React를 쓰면 컴파일 설정을 하지 않을 때

특히 더 편리함을 느낄 수 있습니다.

여러 JSX 요소들은 단지 구문에 설탕정도로 여겨집니다. 예를 들어 React.createElement(component, props, ...children) 을 부를 때 처럼 말이죠.

그래서, JSX를 사용하면서 할 수 있는 모든것을 plain Javascript 만으로도 할 수 있습니다.

예를 들어, 이 코드는 JSX로 사용된 코드 입니다.

class Hello extends React.Component {

render() {

return <div>Hello {this.props.toWhat}</div>;

}

}

ReactDOM.render(

<Hello toWhat="World" />,

document.getElementById('root')

);

그리고 이 코드는 JSX 없이도 컴파일 될 수 있는 코드 입니다.

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')

);

 만약 JSX없이 어떻게 Javascript로 컨버팅 되는지 더 궁금하다면, online Babel compiler를 사용해보세용

만약 여러분이 React.createElement 를 타이핑하기 힘들다면, 짧게 이 패턴을 사용하여 작성할 수 있습니다.

const e = React.createElement;

ReactDOM.render(

e('div', null, 'Hello World'),

document.getElementById('root')

);

만약, 짧은 패턴을 사용하여 React.createElement를 쓴다면, JSX를 사용하지 않고 React를 하는데 좀 더 편리할 것 입니다!

대외적으로, 당신은 react-hyperscript 와 hyperscript-helpers 에서 teser syntax를 사용하는 것을 볼 수 있습니다!

감사합니다.