event 처리

event handle

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

위가 HTML에서 event 를 처리하는 방법이다.

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

위의 코드가 react에서 이벤트를 처리하는 방법이다.
가장크 차이점은 발생하는 이벤트의 기본 동작을 막기 위해서는 prevent Default르르 명시적으로 호출해야 막이진다는 점이다.

<form onsubmit="console.log('You clicked submit.'); return false">
  <button type="submit">Submit</button>
</form>

위에서 볼수 있든 return false 를 명시해 기본 동작의 반환을 막았다면

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

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

react에서는 함수를 호출에 이벤트의 기본 동작을 제어한다.