[React] # 5 이벤트

이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 매우 유사합니다. 몇 가지 문법 차이가 존재합니다

• React의 이벤트는 소문자 대신 캐멀 케이스(camelCase)를 사용
• React에서는 React element에 이벤트를 추가해서 event handler 함수를 넘겨줌
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달
• React에서는 false를 반환해도 기본 동작을 방지할 수 없습니다.
  (반드시 preventDefault를 명시적으로 호출)

function Form() {
  function handleSubmit(e) {
    e.preventDefault();
    console.log('You clicked submit.');
  }

  return (
    <form onSubmit={handleSubmit}>
      <button type="submit">Submit</button>
    </form>
  );
}

Class 컴포넌트의 경우 JSX 콜백 안에서 this의 의미에 대해 주의해야 합니다. JavaScript에서 클래스 메서드는 기본적으로 바인딩되어 있지 않습니다. this.handleClick을 바인딩하지 않고 onClick에 전달하였다면, 함수가 실제 호출될 때 this는 undefined가 됩니다.

onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, onClick={this.handleClick.bind(this)}처럼 해당 메서드를 바인딩 해야 합니다. 이러한 바인딩이 불편할 경우 두 가지 방법이 있습니다.

1. 퍼블릭 클래스 필드 문법
2. 콜백에 화살표 함수 사용

// 퍼블릭 클래스 필드 문법
class LoggingButton extends React.Component {
  
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

// 콜백에 화살표 함수 사용
class LoggingButton extends React.Component {
  handleClick() {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

---

이벤트 헨들러에 인자 전달하기

이벤트 핸들러에 추가적인 매개변수를 전달할 때 다음과 같은 방법을 사용합니다.

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

각각 화살표 함수와 Function.prototype.bind를 사용하며, e 인자가 id 뒤에 두 번째 인자로 전달 됩니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야 하지만 bind를 사용할 경우 추가 인자가 자동으로 전달됩니다.