state：コンポーネントのメモリ

コンポーネントによっては、ユーザ操作の結果として画面上の表示内容を変更する必要があります。フォーム上でタイプすると入力欄が更新される、画像カルーセルで「次」をクリックすると表示される画像が変わる、「購入」をクリックすると買い物かごに商品が入る、といったものです。コンポーネントは、現在の入力値、現在の画像、ショッピングカートの状態といったものを「覚えておく」必要があります。React では、このようなコンポーネント固有のメモリのことを state と呼びます。

このページで学ぶこと

useState を使って state 変数を追加する方法
useState フックが返す 2 つの値
複数の state 変数を追加する方法
state がローカルと呼ばれる理由

通常の変数ではうまくいかない例

以下は、彫刻の画像をレンダーするコンポーネントです。“Next” ボタンをクリックすると、index が 1、2 のように変わりながら次の彫刻が表示されて欲しいのですが、これは正しく動作しません（試してみてください）。

Fork

import { sculptureList } from './data.js';

export default function Gallery() {
  let index = 0;

  function handleClick() {
    index = index + 1;
  }

  let sculpture = sculptureList[index];
  return (
    <>
      <button onClick={handleClick}>
        Next
      </button>
      <h2>
        <i>{sculpture.