[React] jsx와 babel

Dan·2023년 3월 7일
0

React

목록 보기
5/6

JSX

  • React.createElement(원시적 형태) 불편함 => jsx로 개선
    • 예시코드
      const e = React.createElement;
      return e('button', {onClick: () => this.setState({liked: true})}, 'Like');
      
      ReactDOM.render(e(LikeButton), document.querySelector('#root'));
      
      //jsx
      return (
              <button onClick={() => this.setState({liked: true})}>
                Like
              </button>
            );
      ReactDOM.render(<LikeButton/>, document.querySelector('#root'));

Babel

  • script 태그 안에서 <button> 태그는 동작하지 않는다.
  • 이것을 React.createElement로 바꿔주는게 바벨이다.
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <script type="text/babel">
profile
코드가 왜 안돌아가는지 모르는 이유는, 처음부터 왜 돌아가는지도 몰랐기 때문이다 🐼

0개의 댓글