[React] 6 - 이벤트

goal

• 리액트의 이벤트 처리방식에 대해서 알아보자

이벤트 처리

• JSX 문법을 사용해서 "함수로 이벤트 핸들러를 전달"한다.

// html

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

---------------------------------------

// react

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

• preventDefault를 명시적으로 호출해야 한다.

function ActionLink() {
  function handleClick(e) {
    e.preventDefault();
    console.log('The link was clicked.');
  }

  return (
    <a href="#" onClick={handleClick}>
      Click me
    </a>
  );
}

• ES6 클래스를 사용하여 컴포넌트를 정의할 때, 일반적인 패턴은 이벤트 핸들러를 클래스의 메서드로 만드는 것이다.

• 일반적으로 onClick={this.handleClick}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, 해당 메서드를 바인딩 해야한다.

• 께쏚