Reactにおけるデータリストのレンダリング

現代のウェブアプリケーション開発では、バックエンドから受け取ったデータのコレクションをレンダリングすることが一般的です。これを実現するために、map() メソッドを利用します。map() メソッド内ではコールバック関数を使用し、目的の出力をレンダリングするためにJSXを返します。

どのように動作するかを説明するために、例を見てみましょう。App コンポーネントが toys というプロップ（オブジェクトの配列）を渡します。ToyCard コンポーネントは map() メソッドを利用して、配列内の各おもちゃをレンダリングします。

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

13〜15行目では、map() メソッドの利用が確認できます。これにより、配列内の各アイテムを反復処理し、その値を抽出し、各アイテムのデータに基づいた特定のマークアップを生成できます。

アプリ全体のコード:

しかし、コンソールに注目すると、次の警告が表示されていることがわかります：Each child in a list should have a unique "key" prop.。

キー

key は、コレクション内の要素を作成する際に必ず割り当てる必要がある重要な文字列プロパティ。

React はキーを利用して、コレクション内の要素の安定した識別を実現。これらのキーにより、React は変更が発生した際に再レンダリングや再作成が必要な要素を特定し、コレクション全体を再作成することを防止。キーを使用することで、不要な要素の再作成を防ぎ、パフォーマンスの向上につながる。

識別子（例えば、バックエンドデータの id 値）を key プロパティとして利用することが一般的に推奨されています。この方法により、React はコレクション内の個々の要素を効果的に識別・管理できます。

前回のアプリを key プロパティを使って修正しましょう:

// Data from backend
const toysData = [
  { id: "id-1", name: "Rainbow Sparkle Unicorn Plush" },
  { id: "id-2", name: "Jungle Adventure Playset" },
  { id: "id-3", name: "Magical Princess Castle Dollhouse" },
  { id: "id-4", name: "RoboBot Transformer Robot" },
  { id: "id-5", name: "SuperBlast Action Figure" },
];

// Child component
const ToyCard = (props) => (
  <ul>
    {props.toys.map((toy) => (
      <li key={toy.id}>{toy.name}</li>
    ))}
  </ul>
);

// Parent component
const App = () => (
  <>
    <ToyCard toys={toysData} />
  </>
);

14行目：key プロパティは、データ配列内で複数回レンダリングされる要素に設定されています。

アプリ全体のコード: