react Event Handling

 

• HTML DOM 에 클릭하면 이벤트가 발생하고, 발생하면 그에 맞는 변경이 일어나도록 해야합니다.
• JSX 에 이벤트를 설정할 수 있습니다.

 

class Comp extends React.Component {
  render() {
    return (
      <div>
        <button onClick={() => {
          console.log('clicked');
        }}>클릭</button>
      </div>
    );
  }
}

 

Event Handling

• camelCase 로만 사용할 수 있습니다.
  • onClick, onMouseEnter
• 이벤트에 연결된 자바스크립트 코드는 함수입니다.
  • 이벤트={함수} 와 같이 씁니다.
• 실제 DOM 요소들에만 사용 가능합니다.
  • 리액트 컴포넌트에 사용하면, 그냥 props 로 전달합니다.

 

<script type="text/babel">
    console.log(React);
    console.log(ReactDOM);

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

class Component extends React.Component{
  state={
    count:0,
  };
  render(){
    return( 
      <div>
        <p>{this.state.count}</p>
        <button onClick={()=>{
          console.log("clicked");
          this.setState((state)=>({
            ...state,
            count:state.count+1,
          }));   
          //  ...state 위 state={count:0}을 풀어서 복사해주는것 

          }}
          >
          클릭 
        </button>
      </div>
      );
  }
}

    ReactDOM.render(<Component />, document.querySelector('#root')) 
  </script>

onClick 부분을 별도의 메소드로 분리하는 작업  ↓

class Component extends React.Component{
  state={
    count:0,
  };
  render(){
    return( 
      <div>
        <p>{this.state.count}</p>
        <button onClick={this.click}>클릭</button>
      </div>
      );
  }
  
  //click(){} 형식으로 쓰면 this가 제대로 바인드 되지 않아 오류가 뜨면서 실행이 되지 않는다.
  click=()=>{
    console.log("clicked");
          this.setState((state)=>({
            ...state,
            count:state.count+1,
          }));   
  }
}

    ReactDOM.render(<Component />, document.querySelector('#root'))