配列をそのまま画面にする

商品一覧やコメント一覧のような繰り返しのUIは、items.map((item) => <li key={item.id}>{item.name}</li>)のように配列のmapで作ります。データが増えれば表示も自動で増えます。

keyはReactへの目印

リストの各要素には一意なkeyを渡します。Reactはkeyを頼りに「どの行が追加・削除されたか」を効率よく判断します。

学ぶ目的

条件演算子や&&を使った出し分けと組み合わせて、実際のアプリに必ず登場する「一覧画面」を自分で作れるようになります。

• mapで配列からUIを作る
• keyが必要な理由
• 条件によって表示を切り替える