React의 이벤트 적용 방법

React의 이벤트는 소문자 대신 캐멀 케이스를 사용한다.
또한, JSX를 사용해 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

예를 들어 html에서 onclick을 적용시키기 위해선, 다음과 같이 작성한다.

<button onclick="activateLasers()">
  Activate Lasers
</button>

하지만 리액트에서는 다음과 같이 이벤트명을 카멜케이스로, 이벤드 이름을 함수로 작성한다.

<button onClick={activateLasers}>
  Activate Lasers
</button>

preventDefault()

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>
  );
}

this

JavaScript에서 클래스 메서드는 기본적으로 바인딩 되어있지 않기 때문에, this.함수를 바인딩 하지 않고 호출하면 this = undefined 가 됩니다. 따라서 onClick = {this.handleClick} 과 같이 뒤에 ()를 사용하지 않으면, 해당 메서드를 바인딩해야합니다. -> this.handleClick = this.handleClick.bind()

바인딩을 하지 않고 다른 방법을 사용할 수도 있습니다.

퍼블릭 클래스 필드 문법

class LoggingButton extends React.Component {
  // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
  // 주의: 이 문법은 *실험적인* 문법입니다.
  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() {
    // 이 문법은 `this`가 handleClick 내에서 바인딩되도록 합니다.
    return (
      <button onClick={() => this.handleClick()}>
        Click me
      </button>
    );
  }
}

버튼이 렌더링 될 때마다 다른 콜백이 생성되는 단점이 존재합니다. 이런 문제점은 콜백이 하위 컴포넌트에 props로 전달되면 컴포넌트를 추가로 다시 렌더링 해야하므로 별로 권장되지 않는 방법입니다.

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

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

두 줄은 모두 같은 코드이며, e는 이벤트를 나타냅니다. 화살표 함수를 사용하면 명시적으로 인자를 전달해야하지만, bind를 사용하는 경우 추가 인자가 자동으로 전달됩니다.