なぜmap関数を適用するときにキーpropsを与えるのか

作成されたコード

<div className="reply">
	{comments.map((commentText) => {
		return (
			<Comment
				userName="wecodebootcamp"
				commentText={commentText}
			/>
		);
	})}
</div>

前述したように、コードを書くとブラウザには通常のレンダリング情報が表示されますが、「key」prop for elementin iteratorなどの警告情報が表示され、端末には写真とともにコンパイルされた警告のある情報が表示されます!

ここで、サブコンポーネントkeypropに次のようにコードを付与すると、コードが正常にコンパイルされていることが示されます.

<div className="reply">
	{comments.map((commentText, index) => {
		return (
			<Comment
				key={index}
				userName="wecodebootcamp"
				commentText={commentText}
			/>
		);
	})}
</div>

Q.なぜ警告が出たのか、なぜ解決したのか。

keyは、Reactが変更、追加、または削除するアイテムを決定するのに役立ちます.
信頼性の高い一意性を提供するために、アレイ内のレイヤーを指定します.
最良の方法は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することです.
多くのデータのIDは鍵です.
正式なドキュメントでは、経験に基づいてmap()関数内のエンティティにキーを追加することをお勧めします.と言う以上、mapメソッドを使うときは必ずキー値を入れます.
レンダリングされたアイテムに信頼できるIDがない場合は、最後の方法は、アイテムのインデックスをキーとして使用します.
ただし、アイテムの順序が変更される可能性がある場合は、キーにインデックスxを使用することをお勧めします.
パフォーマンスが低下したり、構成部品の状態に関連する問題が発生する可能性があります.
参照文書https://ko.reactjs.org/docs/lists-and-keys.html