[React] 1-3 HTML 속성과 상태(state)

인프런에 제로초님의 강의를 보고 정리한 내용입니다. 
[ 웹 게임을 만들며 배우는 React ]
https://www.inflearn.com/course/web-game-react

1-2에 상태가 추가되었다.

<div id="root"></div> <!-- 결과 : <div id="root"><button>Like></button> </div>-->
    <script>
        const e = React.createElement;
        // class하나가 컴포넌트 하나라고 보자구..
        class LikeButton extends React.Component {
            constructor(props){
                super(props);
                this.state = {
                    liked :false, // 기본상태 
                };
            }

            // render()  :  태그를 만들어주는 함수, 화면을 어떻게 보여줄것인지 (<button>Like></button>를 만들겠다!)
            // render(){return e(1,2,3 )} 
            // 1. 태그 2. html속성 3.내용
            render(){ e('button', {onClick: () => {this.setState({liked:true})}, 
                 type: 'submit'}, this.state.liked === true ? 'Liked' : 'Like'); 
                // <button onClick= "() => {console.log("clicked")}">Like></button> 
            }
        }
    </script>
    <script> // 위에 #root에 그린다!
        ReactDOM.render(e(LikeButton), document.querySelector('#root'));
    </script>
    <!-- 상태는 바뀌는 부분이다. 바뀔수 있는 부분 ) -->

 

render()

render() {return e(  1 , 2 , 3  ) }

1. 태그 , 2. HTML속성 , 3. 내용

 

state (상태)

컴포넌트의 상태가 바뀔 수 있는 부분

좋아요 버튼을 생각하면 => 좋아요 버튼(Like) 클릭하면 Liked로 내용이 바뀔 수 있다는 것임

생성자 부분에서 state(상태)를 (like:false)로 해둔 후 버튼 이벤트가 발생하면 안에있는 내용을 바꾸게 만드는 코드다.