[React] Event Handling

이벤트란 웹 페이지 내부에서 발생하는 사용자의 모든 행동

ex) 스크롤 내리기, 버튼 누르기, 메세지 입력

이벤트 핸들링은 웹에서 발생한 이벤트를 처리하는 것

예를 들어서 버튼의 클릭이라는 이벤트가 발생했을 때 이벤트 핸들러는 onClick = {함수}를 버튼 태그 안에 작성하면 된다.

여기서 함수는 함수의 결과를 전달하는 것이 아니라 함수 자체를 전달하는 것이다. (함수 이름만 쓰는 거야)

그리고 이벤트 객체라는 것이 존재한다.

리액트에서 발생하는 모든 이벤트는 이벤트 핸들러 함수를 호출하면서 호출된 이벤트 핸들러 함수에 매개변수로 이벤트 객체라는 것을 제공함.

출력해보면 SyntheticBaseEvent 라는 객체가 나옴. 한국말로 합성 이벤트 객체

합성 이벤트는 모든 웹 브라우저의 이벤트 객체를 하나로 통일한 형태를 말한다. 

브라우저 마다 다른 이벤트 객체를 걱정 안해도 되게 해줌 ^^

//App.js
import "./App.css";
import Button from "./Button";
import Header from "./Header";

function App() {
  const buttonProps = {
    text: "블로그",
    color: "red",
    a: 1,
    b: 2,
    c: 3,
  };
  return (
    <div>
      <Button {...buttonProps} />
      <Button text={"카페"} />
      <Button text={"메일"}>
        <Header></Header>
      </Button>
    </div>
  );
}

export default App;

//Button.js
import React from "react";

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

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

export default Button;