リストレンダリングの基本

知識課題

知識課題1

• Reactで配列データをリストとしてレンダリングする際に、各要素にkeyプロパティを指定することが推奨されている理由を説明してください。
• keyが指定されていない場合、Reactの挙動やパフォーマンスに関してどのような問題が生じる可能性がありますか？

知識課題2

• リスト要素に設定するkeyプロパティには、どのような値を選ぶべきですか？

知識課題3

• 配列のインデックスをkeyとして使用することが推奨されない主な理由は何ですか？
  • 特にリスト項目の追加、削除、並び替えが発生する場合に、インデックスをkeyに使うとどのような問題が発生する可能性があるか、具体的なシナリオを想定して説明してください。

実践課題

実践課題1

• 文字列の配列（例: ['リンゴ', 'バナナ', 'チェリー']）を受け取り、各要素を<li>タグでリスト表示するReactコンポーネントSimpleListを作成してください。
  • この際、keyプロパティをあえて指定せずに実装し、ブラウザの開発者コンソールに表示される警告を確認しましょう。

実践課題2

• オブジェクトの配列（例: [{ id: 'a1', name: 'リンゴ' }, { id: 'b2', name: 'バナナ' }, { id: 'c3', name: 'チェリー' }]）を受け取り、各オブジェクトのnameプロパティをリスト表示するReactコンポーネントItemListを作成してください。
  • 各リスト要素 (<li>) のkeyには、オブジェクトが持つ固有のidを指定しましょう。