1. リストレンダリングと状態管理とは

Reactで画面に複数のデータを並べて表示することをリストレンダリングと呼びます。

一方で、画面の内容を記憶して変化させる仕組みが状態管理です。

状態とは、今どんなデータを表示しているかを Reactが覚えているメモのようなものです。

2. 状態を使わないリスト表示の基本

まずは、状態を使わないシンプルなリスト表示を見ます。


function App() {
  const fruits = ["りんご", "みかん", "バナナ"];

  return (
    <ul>
      {fruits.map(fruit => (
        <li key={fruit}>{fruit}</li>
      ))}
    </ul>
  );
}

（画面に果物の名前が一覧で表示されます）

この方法は表示するだけなら十分ですが、中身を変えることはできません。

3. 状態管理をイメージで理解する

状態管理は、ホワイトボードに書いた内容を消したり書き直したりするイメージです。

書き換えた瞬間に、それを見ている人全員に新しい内容が見えるようになります。

Reactでは、 useStateという仕組みでこの役割を実現します。

4. 状態を使ってリストを表示する

次に、状態としてリストを管理する例を見てみます。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["ねこ", "いぬ"]);

  return (
    <ul>
      {items.map(item => (
        <li key={item}>{item}</li>
      ))}
    </ul>
  );
}

export default App;

（画面に「ねこ」「いぬ」が表示されます）

この場合、リストの中身は状態として Reactが覚えています。

5. ボタン操作でリストを変更する

状態管理の強みは、ユーザーの操作で画面が変わることです。

ボタンを押してリストにデータを追加する例を見ます。


import React, { useState } from "react";

function App() {
  const [items, setItems] = useState(["パン", "ごはん"]);

  const addItem = () => {
    setItems([...items, "めん"]);
  };

  return (
    <div>
      <button onClick={addItem}>追加</button>
      <ul>
        {items.map(item => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

（ボタンを押すとリストに「めん」が追加されます）