[React] 이벤트 처리하기

Event Handling이란 무엇일까?

Event - 웹 내부에서 발생하는 사용자의 행동 (버튼 클릭, 메시지 입력, 스크롤 등등)

Handling - 다루다, 취급하다, 처리하다

=> 이벤트가 발생했을 때 그것을 처리하는 것 (웹에서 발생하는 사용자들의 행동을 처리하는 것) (버튼 클릭시 경고창 노출)

각각의 버튼을 누르면 큰솔창에 메일, 카페, 블로그가 출력된다.

 

첫번째 방법

onClick={() => {
        console.log(text);
      }}

 

위의 코드를 이벤트를 실질적으로 처리해서 이벤트 핸들러라고 부른다. 

 

두번째 방법 - 변수로 지정해서 작성하기

const Button = ({ children, text, color = 'black' }) => {
  const onClickButton = () => {
    console.log(text);
  };

  return (
    <button onClick={onClickButton} style={{ color: color }}>
      {text} - {color}
      {children}
    </button>
  );
};

export default Button;

밑의 코드와 같이 함수의 결과를 출력하면 x

 <button onClick={onClickButton} style={{ color: color }}>

다른 이벤트들도 같게 설정해주면 된다. 

---

이벤트 객체

이벤트 함수를 호출하면서 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 

const Button = ({ children, text, color = 'black' }) => {
  // 이벤트 객체
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };

  return (
    <button
      onClick={onClickButton}
      // onMouseEnter={onClickButton}
      style={{ color: color }}
    >
      {text} - {color}
      {children}
    </button>
  );
};

export default Button;

  // 이벤트 객체
  const onClickButton = (e) => {
    console.log(e);
    console.log(text);
  };

버튼을 누르면 SyntheitcBaseEvent 객체가 출력된다. 매개변수 e에 저장된 이벤트 객체이다. 

SyntheitcBaseEvent => 합성 이벤트 객체 의미

 

합성 이벤트 객체란? 🤔 

모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태를 의미

 

event 객체가 서로 다르다.

그래서!

Cross Browsing Issue(브라우저 별 스펙이 달라 생기는 문제)가 발생 => 리액트의 Synthetic Event가 해결