[react]map関数を適用するときにキーツールを適用するのはなぜですか?

出典(本書):https://ko.reactjs.org/docs/lists-and-keys.html
JavaScriptとは少し異なるJSX構文の大きな特徴は、「リスト内の各項目に一意のキー値を追加する必要がある」ことです.各リストにキー値を追加しないと、警告ウィンドウが表示されます.

📛 keypropsにポップアップされない警告ウィンドウ

私が作成したコードを例にとると、
配列からなるcommentsというstateを使用してコメントをレンダリングするには、commentsをcommentというサブコンポーネントにマッピングします.(Comment Componentはレンダリングするコメントを返します)
しかし鍵代を渡さず、黄色い線を引いてしまいました.コンソールウィンドウにエラーメッセージが表示されます.

実は画面上では全く問題ありません.レンダー自体は良いですが、反応器では、各リストに独自のキー値(Unique Key Value)を持たなければならないことをお勧めします.

再びキー値をindexの値とし、黄色の下線もなくなり、エラーメッセージもなくなりました.

🙋‍♀️ keyが存在する理由

公式ファイルによると、KeyはReactがどの項目を変更、追加、削除するかを識別するのに役立ち、Keyはアレイ内のユニットに安定した固有性を与えるために指定する必要があります.
👉 すなわち,あるプロジェクトに対する変更を理解する必要がある.
Reactの大きな特性は、変化した部分だけを再レンダリングすることです.(画面全体を再レンダリングする必要はありません)
各配列リストに一意のキー値を割り当てることで、リストが変化したときにその部分だけをレンダリングできます.

🟡 id値をindexとして使用しないでください。

他の公式ファイルには、
index値はidに与えるのはできるだけ避けたほうがいい.(項目を並べ替える場合)
配列の状態を保存する場合は、オブジェクトを配列として保存し、キー値をオブジェクトに入れることが望ましい.
ex)
上のコードでindexをキーとすると、idが直接生成され、キー値が与えられます.

const [comments, setComments] = useState([]);
let commentsCounter = 1;
const createComments = (comments) => (
[{comment,
  id: commentsCounter++}, ...comments]
)

{
  comments.map((comment) => (
    <Comment key={comment.id} />
  ));
}

▼キーを使用して構成部品を抽出中にエラー

キーは周囲に配列されたコンテキストでのみ意味があります.
例えば、ListItem要素が抽出された場合、配列内の<li>ユニットではなく、ListItem内の<ListItem />ユニットはkeyを有するべきである.
以下に、公式ファイルに含まれるエラーキーの使用方法を示します.

function ListItem(props) {
  const value = props.value;
  return (
    <li key={value.toString()}>
      {value}
    </li>
  );
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

正しい使い方は以下の通りです.

function ListItem(props) {
  return <li>{props.value}</li>;
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    <ListItem key={number.toString()} value={number} />
  );
  return (
    <ul>
      {listItems}
    </ul>
  );
}

デバイスを抽出する場合は、キー値をどこに追加するかに注意してください.

🔖 鍵は兄弟間で唯一の値でなければなりません。

配列では、キーワードは兄弟の間で一意でなければなりません.範囲全体で一意ではありません.2つの異なる配列を作成する場合は、同じキーを使用できます.

🍯 の最後の部分

key値を与える理由はreact自体で余計なレンダリングをしないため、key値を与えなければならないと思います.あげるのを忘れないで…!反応を知るほど、開発を容易にするために設置された環境だと感じます.