Menu
Coddy logo textTech

Key(キー)の重要性

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 36/42。

map から返されるすべての要素には、そのアイテムの一意で安定したラベルである key が必要です:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

なぜでしょうか?配列が変更されると、Reactは新しいリストと古いリストを比較します。`key` はどの項目がどれであるかを識別させるため、エレメントを再構築する代わりに移動させることができ、状態、フォーカス、アニメーションをそのまま維持します。

最適な key: データに含まれる本物の id。推奨: アイテムごとに一意で安定している任意の値(果物の名前など)。最終手段: 配列のインデックス。位置は識別子ではないため、並び替えで問題が発生します。

自分で試してみよう

このレッスンにはコードチャレンジは含まれていません。

quiz icon腕試し

このレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。

基本概念のすべてのレッスン