[React.js] 이벤트 핸들링

이벤트 핸들링이란?

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

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

<button

      onClick={() => {      // 이벤트 핸들러 라고 한다

        console.log(text);    

      }}

      style={{ color: color }}

    >

      {text} - {color}

      {children}

    </button>

onClick을 사용하여 버튼 클릭시 콘솔창에 text 값을 출력한다.

const Button = ({ text, color, children }) => {

  const onClickButton = () => {

    console.log(text);

  };

  return (

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

      {text} - {color}

      {children}

    </button>

  );

};

이런식으로 사용 할 수도 있다. 함수 실행 결과는 같다.

<button

      onClick={onClickButton}

      onMouseEnter={onClickButton}

      style={{ color: color }}

    >

클릭 이벤트 말고도 onMouseEnter로 커서를 버튼으로 가져다 댔을때에 이벤트 발생하게 할 수도 있다.

 

이벤트 핸들러 함수를 호출하면서 호출된 이밴트 핸들러 함수에 매개변수로 이벤트 객체 라는걸 제공한다.

// 이벤트 객체

  const onClickButton = (e) => {

    console.log(e);

    console.log(text);

  };

이벤트 객체를 콘솔에 찍어보면

 

이와같은 객체를 출력한다.

이것을 합성 이벤트 객체라하는데

합성 이벤트란

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

브라우저 마다 규격, 동작 방식이 상이하기 때문에 발생하는 문제를 Cross Browsing Issue 라고한다.

이러한 문제를 편리하게 해결해주는 것이 리액트에 합성 이벤트라는 객체이다.

합성 이벤트의 객체는 여러 브라우저의 규격을 참고해서 하나의 통일된 격으로 이벤트 객체를 포맷팅 해준다.