react component event handling

• camelCase로만 사용할 수 있음 
  • onClick, onMouseEnter

• 이벤트에 연결된 자바스크립트 코드는 함수임
  • 이벤트 = {함수}와 같이 씀
• 실제 DOM요소들에만 사용 가능
  • 리액트 컴포넌트에 사용하면, 그냥 props로 전달함

 

1. function Component

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

 

2. class Component

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

      render () {
        return (
        <div>
          <p>{this.state.count}</p>
          <button 
            onClick={() => {
              this.setState((state) => ({
                ...state, 
                count: state.count + 1,
              }));
            }}
          >
          클릭
          </button>
        </div>
        );
      } 
 }

 

3. class Component에 click() 정의

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

-> this바운드를 따로 해야한다. 

      // 1. click에 this바인드
      constructor(props) {
        super(props);
        this.click = this.click.bind(this);
      }
      
      
      // 2. click()을 arrow function으로 변형
      click = () => {
       
        this.setState((state) => ({
          ...state, 
          count: state.count + 1,
        }));
      };