이벤트 처리에 대한 스케치 포스팅이다.

01. 이벤트

• 이벤트 처리하기
• 합성이벤트(SyntheticEvent)

리액트에서는 JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달합니다. return false가 작동하지 않기에 e.preventDefault() 로 이벤트를 제한해야한다.

01-1. 버튼 예제

HTML

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

React 방식

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

01-2. 폼 예제

HTML

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

React 방식

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

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

React를 사용할 때 DOM 엘리먼트가 생성된 후 리스너를 추가하기 위해 addEventListener를 호출할 필요가 없습니다. 대신, 엘리먼트가 처음 렌더링될 때 리스너를 제공하면 된다.

버블링과 캡처링

버블링과 캡처링

• 버블링 : 특정 Element가 이벤트가 발생했을 때 부모로 이벤트로 보내는 것을 말함
• 캡처링 : 부모가 내 자식들 중에 누가 이벤트가 발생했는가 체크하는 과정