なぜReactにはKeyが必要なの?

以下に示すように、mapでリストを表示すると問題が発生します.

import { Test } from '../../src/test2';
export default function Test2() { constList=['사과','딸기','바나나'];
return ( <>
      {List.map((data) => (
        <Test>{data}</Test>
))} </>
); }

このように、コンソールには赤いラベルが貼られています.

エラーはuniquiキーが必要だということです.

1.なぜReactにKeyが必要なの?

仮想DomとRenderingを理解するのは簡単です.
Reactはデータの状態をメモリに保存し、既存のデータとは異なる部分だけをレンダリングして画面に描画します.
一意のキー値がない場合は、すべてのデータを比較する必要があります.
キーがある場合は、キー値を比較するだけで、キーが追加されたかどうか、削除されたかどうかを比較し、不要なレンダリングを除去できます.
このため、キー値として重複しない一意の値を付与する必要があります.

2.mapのインデックスをキーとして使用するときに発生する問題

鍵が同じ場合、Reactは同じDom要素を表示するため、次の問題が発生します.
配列内のインデックスの場合、既存の0番インデックスの要素を削除します.
空きを埋める他の要因があります.
ゼロインデックスからデータを削除するとreactはデータの変更を検出します.
再レンダリング後、インデックスは0から再マッピングされ、インデックス0のデータ
インデックス番号1にマップします.
これにより、既存の配列の0番インデックスが削除されますが、既存の0番インデックスの
値は1番のインデックスで上書きされ、1番のインデックスの値は消えます.
逆に、追加すると上記の問題も発生します.
インデックス0にデータを追加すると、Reactはこれらのデータを検出して再レンダリングします.
ただし、ここに配列を追加すると、既存の0番インデックスには他のデータが含まれ、reactはインデックス値のみでデータを上書きします.
新しく変更された0番索引の場所には、既存の0番索引のデータが表示されるため、問題が発生します.
配列からデータを追加または削除するたびに、インデックスの値が変わります.
配列の一番前に要素を追加すると、既存の0번 인덱스の値は1번 인덱스に移動します.
このとき、反応器マッピング値のキーがindexである場合、0 -> 1번 인덱스に移行した1번 인덱스の値は0번 인덱스にマッピングされる.

3.IndexをKeyとしても良い

静的データ、

マッピングのすべてのデータにIDがない場合、

データは再ソートまたはフィルタされていません.

indexとkeyの詳細