react event handling

이벤트핸들러

Posted by : yoo94 on Jan 17, 2024

1. 태그안에 바로 정의

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

Button.defaultProps = { color: "black" };
export default Button;

위에처럼 태그 안에 바로 정의 해도 되고 아래처럼 이벤트 로직이 길면 빼서해도 된다.

2. 함수로 빼서 정의

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;

함수 이름만 전달해야지 ()이거 붙여서 하면 안된다.

이벤트 객체

리액트에서는 모든 이벤트핸들러 함수에 이벤트 객체라는 것을 제공한다.

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

위에처럼 e라는 매개변수를 받아서 출력해보면 이런식으로 이벤트 객체가 반환되어있다.

이것이 바로 합성 이벤트 객체이다. 브라우저가 너무 많아서 동작이 조금씩 다 다르다. 크롬,엣지,파이어 폭스 등등. 이벤트 객체들도 브라우저 마다 조금씩 다르기 때문에 브라우저 별로 스펙이달라서 발생하는 문제를

cross browsing lssue 라고 한다.

여러 브라우저들의 규격을 통합해서 만들어 놓은 것이