-
[JS] React.js JSX 없이 React 사용하기Dev/JS 2018. 6. 3. 16:44
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를 사용하는 것을 볼 수 있습니다!
감사합니다.
'Dev > JS' 카테고리의 다른 글
[JS]Shallow Compare (0) 2018.07.03 [React.js]Derived State를 언제쓸까? (0) 2018.07.02 [JS] React.js Portal 알아보기 (0) 2018.06.03 [JS] React.js Fragment 알아보기 (2) 2018.06.03 [JS] React.js Context API 알아보기 (0) 2018.06.03