React - Event

React 이벤트 제어

• DOM 요소 이벤트를 제어하는 것과 매우 유사
• React 이벤트는 소문자 대신 camelCase를 사용
• JSX에 문자열 대신 함수를 전달

Add Event in HTML

<button onClick={action}>Action</button>

React에서는 기본 동작을 막기 휘애 false리턴을 사용할 수 없다. 반드시 명시적으로 preventDefault를 호출해야 한다.

<!-- 원래는 이렇게 했다. -->
<a
 href="#"
 onclick="console.log('Clicked.'); return false"
>
 Click
</a>

function ActionLink() {
 function handleClick(e) { // 합성 이벤트
  e.preventDefault();
  console.log('The link was clicked.');
 }
 
 return (
  <a
   href="#"
   onClick={handleClick}
  >
   Click me
  </a>
 );
}

This

• 자바스크립트에서 클래스 메소드는 기본적으로 bound되지 않는다.
• this.handleClick바인트를 잊은 채 onClick에 전달하면, this는 함수가 실제로 호출될 때 undefined로 취급된다.
• 일반적으로 onClick={this.handleClick}처럼 ()없이 메소드를 참조하려면, 그 메소드를 bind해야 한다.

class Test extends React.Component {
 this.handleClick = this.handleClick.bind(this);
 ...

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

위와 같은 문법이 귀찮다면 해결 방법은 2가지가 있다.

1. public class field 문법

class LoggingButton extends React.Component {
 handleClick = () => {
  console.log('this is:', this);
 }

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

2. arrow function 사용

문제점: LoggingButton을 렌더링할 때마다 서로 다른 콜백이 만들어짐(하위 컴포넌트에 props를 전달하는 경우, 다시 렌더링된다.)

class LoggingButton extends React.Component {
 handleClick() {
  console.log('this is:', this);
 }

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

Passing Arguments to event handlers

arrow function, Function.prototype.bind를 각각 사용

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