이벤트

핵심 포인트

• 클릭은 onClick, 입력은 onChange로 받습니다. HTML의 onclick과 달리 두 번째 단어의 첫 글자가 대문자입니다
• "나중에 실행할 함수"를 전달합니다. ()를 붙이지 않고 onClick={handleClick}이라고 씁니다
• 인수를 넣어 호출하고 싶을 때는 () =>로 감쌉니다: onClick={() => setCount(0)}

직접 해 보기

import { useState } from "react"

export default function App() {
  const [message, setMessage] = useState("아직 누르지 않았습니다")

  function handleClick() {
    setMessage("눌렸습니다!")
  }

  return (
    <div style={{ padding: 16 }}>
      <button onClick={handleClick}>눌러 보세요</button>
      <p>{message}</p>
    </div>
  )
}

1. 메시지를 처음 내용으로 되돌리는 "되돌리기" 버튼을 추가해 보세요
2. onClick을 onMouseEnter로 바꿔서 마우스를 올리기만 해도 반응하게 해 보세요
3. onClick={handleClick()}처럼 ()를 붙이면 어떻게 되는지 확인해 보세요

자주 하는 실수