: 사건!
<button onclick="activate">
Activate
</button>
<button onClick={activate}>
Activate
</button>
: 어떤 사건이 발생하면, 사건을 처리하는 역할
function Toggle(props) {
const [isToggleOn, setIsToggleOn] = useState(true);
// 방법1. 함수 안에 함수로 정의
function handleClick() {
setIsToggleOn((isToggleOn) => !isToggleOn);
}
// 방법2. arrow function을 사용하여 정의
const handleClick = () => {
setIsToggleOn((isToggleOn) => !isToggleOn);
}
return (
<button onClick={handleClick}>
{isToggleOn ? '켜짐' : '꺼짐'}
</button>
)
}
: 함수에 전달할 데이터
: 매개변수
function MyButton(props) {
const handleDelete = (id, event) => {
console.log(id, event.target);
}
return (
<button onClick={(event) => handleDelete(1,event)}>
삭제하기
</button>
)
}