[React 공식문서] 6. 이벤트 처리하기

React 엘리먼트에서 이벤트를 처리하는 방식은 DOM 엘리먼트에서 이벤트를 처리하는 방식과 유사합니다.

 

차이점

1. React 이벤트는 카멜 케이스를 사용

2. JSX를 사용해 문자열이 아닌 함수로 이벤트 핸들러 전달

3. false를 return 해도 기본 동작을 방지할 수 없기 때문에 preventDefault를 명시적으로 호출해야 함

 

HTML

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

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

React

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

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

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

 

---

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

이벤트 처리하기 – React