1. React Event

리액트에서 이벤트 처리하는 방식에 대해서 알아보겠습니다. React 엘리먼트에서 이벤트 처리하는 방식은 DOM엘리먼트에서의 이벤트 처리하는 방식과 비슷하지만 다른점도 있습니다.

1.1 차이점

  1. React의 이벤트는 카멜케이스를 사용합니다. / DOM의 이벤트는 소문자를 사용합니다.
  2. JSX를 사용하여 함수로 이벤트 핸들러를 전달합니다. / DOM은 문자열로 이벤트 핸들러를 전달합니다.
<body>
  <button onclick="addNumber()">Click me!</button>
  <script>
    function addNumber() {
      console.log("I'm button");
    }
  </script>
</body>

function Resume(props) {
  const [like, setLike] = useState(0);

  function clickLike() {
    setLike(like + 1);
  }

  return (
    <button onClick={clickLike}>like</button> <span>{like}</span>
  );
}

export default Resume;

2. 리액트에서 지원하는 이벤트 종류