イベントハンドラ

なぜ学ぶか： 「ボタンを押したら何かが起きる」— その「押したら」をコードにつなぐのがonClickです。ここには、AIもやってしまう有名な書き間違いがあります。まず正しい形と間違いを並べて見てください。

まずはこの例を見てみましょう

const sayHi = () => console.log("こんにちは！");

// ✅ 正解: 関数「そのもの」を渡す（押されたときに実行される）
<button onClick={sayHi}>あいさつ</button>

// ✅ これも正解: その場で関数を作って渡す
<button onClick={() => console.log("押された！")}>ボタン</button>

// ❌ 間違い: カッコ付きは「画面を描いた瞬間」に実行されてしまう
<button onClick={sayHi()}>あいさつ</button>

onClickに渡すのは「関数そのもの」。カッコを付けると、押していないのに実行されます。