• 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}
      
      // constructor(props){
      //   super(props);

      //   this.click = this.click.bind(this);
      // }

      render(){
        return(
          <div>
            <p>{this.state.count}</p>
            <button onClick={this.click}>클릭</button>  
          </div>
        );
      }

      click = () =>  {
        this.setState((state)=>({
          ...state, 
          count: state.count + 1
        }));
      }
    }

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