Event - Synthetic Event

Synthetic Event ?

• 이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기위해 (각 브라우저에서는 이것 저것 다른 이벤트가 있다.) 하나로 묶은 합성 이벤트 래퍼인 Synthetic Event 객체를 전달받는다.
• 브라우저 고유의 이벤트가 필요하다면 nativEvent 어트리뷰트를 참조하자.
• 리액트가 알아서 업데이트 할테니, 편하게 갖다 쓰면 된다. 지원 이벤트는 공식문서를 참조하자.

이벤트 처리하기

• React Event는 합성 이벤트로, 기존에 알던 Event와 인터페이스는 같지만 직접 대응되진 않는다.

(= 아주 유사하지만 완전히 같지 않다.)

• React Event는 소문자가 아닌 camelCase를 사용한다.
• JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다.

// HTML 내에서 이벤트 처리
<button onclick="activateLasers()">
  Activate Lasers
</button>

// REACT 내에서 이벤트 처리
<button onClick={activateLasers}>
  Activate Lasers
</button>

• return false를 사용해서는 이벤트의 기본동작을 방지할 수 없으며, 기본동작을 방지하기 위해서는 반드시 preventDefault를 사용해야 한다.

// 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 내에서 기본동작 방지 중. 파라미터 e 는 합성 이벤트이다.

합성이벤트 관련 공식문서 링크 : [ 합성 이벤트 ]

• 바닐라JS에서와 달리 EventListener를 호출할 필요가 없다.
• this 바인딩에 대해서 주의하도록 하자.
• React Event는 기본적으로 버블링 단계에서 호출되며, 이벤트 이름에 Capture를 추가하고 onClick이 아닌 onClickCapture를 사용하면 캡쳐링 단계에서 클릭 이벤트 핸들러를 사용할 수 있다. → 자식보다 부모 레벨에서 먼저 이벤트를 발생 싶을 때 사용하면 되겠죠.