React Basic - 2. JSX

JSX

원시 형태의 React의 불편함을 해소하기 위해 XML기술을 이용해 HTML문서와 유사하게 react 코드를 표현하는 방식

// HTML
<div id="root"></div>


=====================================================


    class LikeButton extends React.Component{
        constructor(props){
            super(props);
            this.state = {liked:false};
        }
        render(){
            if(this.state.liked){
                return 'You Liked this.';
            }
		// 원시 형태의 리액트 코드를 주석 시켰다.
           // return React.createElement('button', {onClick: ()=>this.setState({liked:true})}, '뿡빵');
           return(
             // JSX
                <button onClick = {()=> this.setState({liked:true})}>뿡빵</button>
           );
        }

    }
 
    ReactDOM.render(<LikeButton/>, document.querySelector('#root'));

이 코드는 JS 문법에서 어긋나기 때문에 실행되지 못한다. 이 코드를 실행하기 위해서는 babel이라는 라이브러리를 사용해야 한다.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
코드~
</script>

React 18 버전부터는 ReactDOM.render와 같은 방식으로 화면을 그리지 않는다.

<script type="text/babel">
  // 17버전 코드
     // ReactDOM.render(<LikeButton/>, document.querySelector('#root'));
 
  // 18 버전 코드
   	ReactDOM.createRoot(document.querySelector("#root").render(<LikeButton/>);
</script>