React 공부할끄니까! 리액트 이벤트와 네이티브 이벤트?!

SynthethicEvent

리액트에서 이벤트 핸들러는 보통 SynthethicEvent를 전달 받게 된다.

번역하면 합성 이벤트라고 하는데, 문서에 따르면 "기본 DOM 이벤트와 같은 표준을 준수하지만 일부 브라우저의 불일치를 수정한다." 라고 되어있다.

솔직히 무슨 말을 하는건지 이해하기 힘어서 ChatGPT에게 물어봤다.

• 기본 DOM 이벤트 표준 준수: onClick, onChange 같은 이벤트 이름 event.target 같은 이벤트 객체의 동작이 브라우저의 표준 이벤트와 유사하게 설계됨
• 브라우저의 불일치 수정: 브라우저간에 이벤트 동작이 일관되지 않을 수 있는데 리액트는 자체적으로 이를 해결해 동일한 코드가 모든 브라우저에서 일관되게 동작하도록 함. 예를들어, event.key와 event.which 같은 걸 동일하게 접근하는 방법을 제공함
• SynthethicEvent: 브라우저의 NativeEvent를 래핑해, 브라우저간 차이를 숨기고 표준화된 인터페이스를 제공하는 이벤트 객체임

개념이 어느정도 머릿 속에서 정리되는거 같다.

function App() {
  const handleClick = (event) => {
    console.log(event); // SyntheticEvent
    console.log(event.target); // 이벤트가 발생한 DOM 요소
    event.preventDefault(); // 기본 동작 방지
  };

  return <button onClick={handleClick}>Click me</button>;
}

위 예제를 보자면, event는 다른 브라우저의 네이티브 이벤트가 아닌 리액트의 SynthethicEvent고, 그렇기 때문에 브라우저가 다르다고 해서 리액트 코드를 변경할 필요가 없다는 뜻이다.

🤔 또한, 리액트 이벤트 객체는 이벤트 풀링을 통해 메모리 사용량을 줄이고 성능을 최적화한다고 하는데 이 부분에 대해서 딥다이브를 해봐야 겠다. 대체 어떤 원리와 개념으로? 왜 이벤트 풀링일까?

NativeEvent

그러면 이제 네이티브 이벤트란 뭘까? 위에서 리액트 이벤트 객체가 네이티브 이벤트를 래핑하고 다른 브라우저에서도 동작할 수 있도록 표준화한 인터페이스를 제공했다고 언급했다.

그렇다면 네이티브 이벤트는 브라우저 고유로 정의된 이벤트를 의미할 수 있겠다.

리액트에서는 event라는 객체 안에 nativeEvent 객체를 가지고 있고, 이를 통해 브라우저 고유의 네이티브 이벤트에 접근할 수 있다. 이 객체를 통해 브라우저에서 발생한 실제 이벤트에 접근할 수 있게 된다.

nativeEvent 객체에는 대표적으로 마우스 클릭 위치를 구하는 clientX, clientY 같은 속성이 있다.

References.

• ［1］React 이벤트 객체
• ［2］SynthethicEvent