[React] 이벤트 처리하기

출처:  https://ko.reactjs.org/docs/handling-events.html

이벤트 처리하기 – React

---

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

 

• React의 이벤트는 소문자 대신 캐멀 케이스(CamelCase)를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

 

HTML

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

---

React

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

---

또 다른 차이점으로, 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>
  );
}