なぜ鍵を使うのですか?

なぜkeyを使うのですか?

レポートでkeyが使用されるのは、フローデータの処理中に一部の要素が変更(作成、削除、変更)されたためです.
keyはエレメントのkey値を検索し、一致するエレメントのみをすばやく検索し、変更を許可します.keyがなければ、keyがある場合よりも時間がかかる要素を順次比較することによって変化を感知することができる.
また、keyがなければ、アレイ内部で特定の要素のデータを検索して変更すること自体が不可能であるか、非常に困難である.
このような過程を画期的に減らす役割を果たした.

キーの設定

keyを設定すると、propsを設定するように、構成部品要素の内部に作成されます.
htmlでidを設定すると一意値をidに設定し、reactでキー値を設定すると一意値も設定します.

<div className="List">
   {props.map(list => {
      return(
         <Card 
            key={list.id} 
            name={list.name} 
            userName={list.username} />
      )
   })}
</div>

[data]

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
  },
  {
    "id": 2,
    "name": "Ndak Howell",
    "username": "Make",
  }
]

前述したように、mapリピート素子を使用する場合は、key값に一意の値を設定する必要があります.したがって、propsを介してデータを受信する場合、データにid값がある場合、idを呼び出すことが望ましい.
ただし、propsにid値がない場合、map関数に渡されるコールバック関数のindexが使用される.

鍵が設定されていない場合

Warning: Each child in a list should have a unique "key" prop.

開発者ツールでこのようなエラーメッセージが表示された場合、キー値が指定されていないため、エラーの部分を検索することでキー値を設定できる可能性があります.)