[React] Event Handling과 합성 이벤트 객체

Event Handling이란?

1. Event = 웹 내부에서 발생하는 사용자의 행동

   ex. 버튼 클릭, 메세지 입력, 스크롤 등등

2. Handling: 이벤트가 발생했을 때 그것을 처리하는 것

   ex. 버튼 클릭 시 경고창 노출

   기존에 만든 button.jsx 파일에 onClick 이벤트를 추가해보겠다.

   const Button = ({ text, color, children }) => {
     return (
       <button
         onClick={() => {
           console.log(text);
         }}
         style=
       >
         {text} - {color.toUpperCase()}
         {children}
       </button>
     );
   };
   
   Button.defaultProps = {
     color: "black",
   };
   
   export default Button;
   

   

   이렇게 클릭과 같은 이벤트가 발생했을 때 실행될 수 있도록 설정된 애로우 함수를 이벤트 핸들러라고 부른다.

   

   아래 방식처럼 변수를 선언하는 것도 가능하다.

   const Button = ({ text, color, children }) => {
     const onClickButton = () => {
       console.log(text);
     };
   
     return (
       <button onClick={onClickButton} style=>
         {text} - {color.toUpperCase()}
         {children}
       </button>
     );
   };
   
   Button.defaultProps = {
     color: "black",
   };
   
   export default Button;
   

합성 이벤트 객체(Synthetic Base Event)

• onClickButton 함수에서 e라는 매개 변수를 선언하고 콘솔에 출력하면 아래와 같이 SyntheticBaseEvent라는 객체가 출력된다.

const onClickButton = (e) => {
  console.log(e);
  console.log(text);
};

합성 이벤트 객체(Synthetic Base Event)란?

= 모든 웹 브라우저의 규격을 참고해서 이벤트 객체를 하나의 포맷으로 통일한 형태

이미 세상에 너무나 많은 브라우저가 있고 브라우저를 만드는 회사들이 전부 다르기 때문에 동작하는 방식도 조금씩 다르다.

예시로, 현재는 없어진 인터넷 익스플로러에서는 최신 자바 스크립트 기능을 거의 쓸 수 없다.

또한 크롬에서는 이벤트 객체(현재 이벤트가 발생한 요소)를 target이라 부르는데, 사파리에서는 ETarget으로 부르는 등 서로 다르다.

이렇게 브라우저마다 스펙(규격과 동작 방식)이 달라서 생기는 문제를 Cross Browsing Issue라고 부른다.

리액트에서는 ‘합성 이벤트 객체’라는 통합 규격을 사용해 Cross Browsing Issue로부터 비교적 자유롭다.

• react
• node-js