React - 이벤트 핸들링(Event Handling)

 

Event Handling

→ 이벤트가 발생했을 때 그것을 처리하는 것

→ 버튼 클릭시 경고창 노출과 같은 동작

const Button = ({ children, text, color = "black" }) => {
  // 이벤트 객체 e
  const onCLickButton = (e) => {
    console.log(e); //SyntheticBaseEvent: 합성 이벤트 객체
    console.log(text);
  };
  return (
    <button
      onClick={onCLickButton}
      onMouseEnter={onCLickButton}
      style={{ color: color }}
    >
      {text} - {color.toUpperCase()}
      {children}
    </button>
  );
};

export default Button;

 

SyntheticBaseEvent

→ 합성 이벤트 객체

→ 크롬, 사파리, 웨일 등 서로 다른 브라우저의 규격이나 동작 방식이 달라서 생기는 Cross Browsing Issue를 리액트에서 해결하기 위해 통합된 형태로 규격화한 객체