이벤트적용(함수형,class)

1.class로 event 발생시키기

  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

// function Component(){
//   return (<div>
//       <button onClick = {()=>{
//         console.log("click")
//       }}
//       >
//       클릭
//       </button>
//     </div>
//   );
// }

class Component extends React.Component{
  state = {
    count:0,
  }
  render(){
    return(
      <div>
        <p>
          {this.state.count}
        </p>
        <button
          onMouseEnter = {()=>{
            console.log("clicked");
            this.setState((state)=> ({
              ...state,
              count:state.count+1
            }));
          }}  
        >
          클릭
        </button>  
      </div>
    )
  }
}
ReactDOM.render(<Component />, document.querySelector("#root"));

2. click 메서드를 하단에 분리할 경우 this가 연결점이 없기 때문에 

상단 constructor에 작성하여 bind 하거나

arrow function을 click 메서드 내에 실행시켜 this를 연결

class Component extends React.Component{
  state = {
    count:0,
  }

  //1.construcor
  // constructor(props){
  //   super(props);
  //   this.click = this.click.bind(this);
  // }
  render(){
    return(
      <div>
        <p>
          {this.state.count}
        </p>
        <button
          onClick = {this.click}>클릭</button>  
      </div>
    )
  }
// 이벤트의 내용물을 하단으로 분리시 
//하단 setState의 this가 bind가 안되어있어 오류가 뜨므로
  <div id="root"></div>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script type="text/babel">

//1.상단에 constructor 생성하여 bind 함수 만들어서 this 묶어주기
//2. arrown function으로 this 연결
//   click(){
//     console.log("clicked");
//       this.setState((state)=> ({
//         ...state,
//         count:state.count+1
//       }));     
//     }
// }
  click = ()=>{
    console.log("clicked");
      this.setState((state)=> ({
        ...state,
        count:state.count+1
      }));     
    }
}
ReactDOM.render(<Component />, document.querySelector("#root"));
</script>