리액트 React Event Object와 합성 이벤트

chanwukim

2024-06-28·4 min read

React 이벤트 객체

React에서 이벤트 핸들러는 매개변수로 '합성 이벤트 객체(synthetic event)'인 'React 이벤트 객체'를 받는다.

function App() {
  function handleClick(e: React.MouseEvent) {
    // ...
  }

  return <button onClick={handleClick}>children</button>;
}

왜? : React는 크로스 브라우징 이슈를 해결하기 위해 자체적으로 React 이벤트 객체를 만들었다. 덕분에 일관된 API를 사용해 모든 브라우저에서 동작할 수 있는 코드를 작성할 수 있다.
한계점 : React 이벤트 객체가 모든 브라우저의 이벤트 프로퍼티나 메서드를 제공하지 않기 때문에, 필요하다면 React 이벤트 객체의 nativeEvent를 사용하여 브라우저의 기본 이벤트 객체를 참조할 수 있다.

React 이벤트 객체의 타입 최상단 BaseSyntheticEvent에서 nativeEvent를 볼 수 있다.

interface BaseSyntheticEvent<E = object, C = any, T = any> {
        nativeEvent: E;
        currentTarget: C;
        target: T
        ...
}

합성 이벤트(synthetic event)

합성 이벤트는 코드로 직접 생성하고 이벤트를 발생(dispatch)시키는 이벤트다. 사용자 클릭 같은 브라우저 자체에서 발생하는 이벤트와 다르게, 합성 이벤트는 개발자가 필요할 때 직접 생성하고 실행할 수 있다.

코드로 알아보자:

const btn = document.getElementById("btn");

// 1. 버튼을 클릭하면
btn.addEventListener("click", (e) => {
  // 2. 커스텀 이벤트 'cat'을 생성한다
  const customEvent = new CustomEvent("cat", {
    detail: {
      name: "navy",
    },
  });

  // 3. 'cat' 이벤트를 발생시킨다
  btn.dispatchEvent(customEvent);
});

// 4. 'cat' 이벤트 리스너
obj.addEventListener("cat", function (e) {
  // 이벤트 발생 시 처리할 로직
  console.log(e.detail);
});

(1): 버튼 클릭 시 콜백 함수가 실행된다.
(2): CustomEvent를 생성한다. CustomEvent 생성자의 두 번째 인자 옵션은 EventInit을 상속한 CustomEventInit이며, detail 프로퍼티를 추가적으로 갖는다. detail 프로퍼티는 이벤트와 함께 전달할 추가적인 데이터를 포함할 수 있다.
(3): 생성된 customEvent를 dispatchEvent() 메서드를 사용해 발생시킨다.
(4): 'cat' 이벤트 리스너는 발생한 커스텀 이벤트를 처리한다.

이 과정을 통해 이벤트를 직접 생성하고 발생시킬 수 있게 되었다.

결론

React 이벤트 객체는 크로스 브라우징 이슈를 해결하고 일관된 이벤트 처리를 가능하게 한다.
합성 이벤트에 대해 정리했다. 합성 이벤트를 사용하면, 직접 시맨틱한 커스텀 이벤트를 생성하고 원하는 시점에 발생시킬 수 있다.

리액트 React Event Object와 합성 이벤트

React 이벤트 객체

합성 이벤트(synthetic event)

결론

참고

댓글