[React] 리액트 클래스 컴포넌트에 이벤트 정의하기

🎯 클래스 컴포넌트에 이벤트 정의 방법

• 함수를 이벤트 바인딩을 하지 않으면 해당 함수가 어떤 함수인지 알 수 없기 때문에 바인딩을 꼭 해줘야 한다.

 

1. constructor()와 render()사이에 이벤트를 정의한다.

이벤트 명 = () =>{
//이벤트 기능
}

 

2. constructor()에서 정의한 이벤트를 바인딩해준다.

this.이벤트명 = this.이벤트명.bind(this);

 

3. render()내에서 이벤트를 호출.

<button onClick={this.이벤트명}>

 

📝 메소드에서 이벤트 바인딩

// 화살표 함수를 사용한 이벤트 핸들러
onClick={(e)=>this.이벤트명(매개변수, e)}

// bind()함수를 사용한 이벤트 핸들러
onClick={this.이벤트명.bind(this, 매개변수)}

• 화살표 함수를 사용하면 명시적으로 인자 e를 제공해야 하지만, bind()를 사용할 경우 자동으로 인자 e가 전달된다.

 

🏷 요약

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true};

    //정의한 이벤트를 바인딩
    this.handleClick = this.handleClick.bind(this);
  }

  //handleClick 이벤트를 정의
  handleClick(e) {
    e.preventDefault();
    console.log(this.state)

    this.setState(prevState => ({
      isToggleOn: !prevState.isToggleOn
    }));
  }

  render() {
    return (
      //button 태그에 handleClick이벤트를 등록
      <button onClick={this.handleClick}>
        {this.state.isToggleOn ? 'ON' : 'OFF'}
      </button>
    );
  }
}

ReactDOM.render(<Toggle />, document.getElementById('root'));

serviceWorker.unregister();

1. 이벤트 함수 선언 시 바인딩은 필수
2. .bind()를 일일이 작성하는 것을 방지하기 위해 화살표 함수로 선언! (화살표 함수로 선언하면 함수 선언 + 이벤트 바인딩이 자동으로 된다고 생각하면 된다)
3. 지역변수를 참조하기 위해서는 명시적으로 바인딩해야 한다.
   1. this로 이벤트 핸들러 호출 시 명시적으로 바인딩해야 한다.
   2. 화살표 함수로 이벤트 핸들러를 호출하는 과정에서 자동으로 바인딩이 되기 때문에 .bind()가 불필요하다.