はじめに
Reactでループ処理を使って、listを羅列する時に、<li key=""></li>
みたいな形でkey属性を付与することが推奨されているかと思います。
理由として一応↓のように説明をされていて、今まで何となくで理解をしてましたが、
仮想DOMの情報整理をしている時にどういうことかが理解できてハッとしたので備忘録として書いておきます。
Key は、どの要素が変更、追加もしくは削除されたのかを React が識別するのに役立ちます。配列内の項目に安定した識別性を与えるため、それぞれの項目に key を与えるべきです。
参照：リストとkey
結論
仮想DOMで変更前と変更後を比較する際に、差分を識別しやすくし、
パフォーマンスを改善することがkey属性を付与する意味だと理解。
そもそも、Reactは仮想DOMという仕組みを使って、表示の変更を行う。
具体的には、変更前と変更後の仮想DOMを比較して差分を検出し、その差分のみをリアルDOMへ反映するという流れ。
差分を検知するには、変更前と変更後で「どこが同じでどこが違うのか」を判別する必要があり、key属性を付与してあげることで同一部分の識別がスムーズになる。