リストとキー - 配列を画面に描画する

このトピックを終えると

React で配列をレンダリングする方法と、キーの役割を理解できるようになります。

map でリストをレンダリングする

配列のデータを画面に表示するには、map を使用します。

const fruits = ["Apple", "Banana", "Cherry"];

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

配列の各要素を JSX に変換します。ただし、key という特別な prop があります。

キーが必要な理由

リストで項目が追加、削除、または並べ替えられたときに、React は どの項目が変更されたか を知る必要があります。キーは、各項目の 一意の識別子 として機能します。

キーがない場合、React は順序のみを比較します。

前: [A, B, C]
後: [X, A, B, C]

キーがない場合、React は「1 番目が A から X に、2 番目が B から A に、...」すべて変更されたと判断します。キーがある場合、「X が新たに追加された」ことだけを認識します。

キーのルール

// 一意の ID がある場合 - 最善
{users.map(user => (
  <UserCard key={user.id} user={user} />
))}

// データに一意の値がない場合 - 次善
{items.map(item => (
  <li key={item.name}>{item.name}</li>
))}

キーは 兄弟要素の間で一意 でなければなりません。データベースの ID が最適です。

インデックスをキーとして使用すべきでない理由

// 避ける
{items.map((item, index) => (
  <li key={index}>{item}</li>
))}

項目が追加、削除、または並べ替えられると、インデックスが変更されます。「3 番目」だった項目が削除されると、「2 番目」になります。React はキーが同じなので、同じ項目であると誤って認識します。

結果：入力フィールドの値が誤った項目に貼り付けられたり、アニメーションがおかしく動作したりします。

インデックスを使用してもよい場合:

• リストが固定されており、絶対に変わらない場合
• 項目に状態や入力フィールドがない場合

それ以外の場合は、一意の値をキーとして使用してください。

キーは prop ではありません

function UserCard({ key, user }) {
  // ここで key にアクセスすることはできません！
}

キーは、React 内部で使用される特殊な属性です。子コンポーネントで props.key としてアクセスすることはできません。ID が必要な場合は、別の prop として渡してください。

<UserCard key={user.id} userId={user.id} user={user} />

重要なポイント

map を使用して配列を JSX に変換し、各項目に 一意のキー を与える必要があります。 キーは、React が項目の 追加/削除/移動を効率的に検出 するために必要です。 データの 一意の ID をキーとして使用してください。インデックスは避けてください。