- はじめに このセクションでは、Reactのリストとキーの章のリストのレンダリングについて調べていきます。リストのレンダリングは、ユーザー、製品、検索結果など、複数のアイテムを表示する際に重要です。GeekとGalの会話に参加して、Reactでのリストのレンダリングについてもっと学びましょう！
Reactアプリを作るとき、映画やレシピのリストのようなアイテムのリストを表示することがよくあるわよね！
Reactコンポーネントでアイテムのリストをレンダリングするにはどうすればいいの？
いい質問ね！JavaScriptのmap()関数を使ってアイテムの配列をループし、コンポーネントにレンダリングする要素のリストを作成することができるわ！
- Reactでのリストのレンダリング
これがReactコンポーネントでmap()を使ってアイテムのリストをレンダリングする方法の例ね：
function MovieList({ movies }) {
return (
<ul>
{movies.map((movie) => (
<li key={movie.id}>{movie.title}</li>
))}
</ul>
);
}
なるほど！map()関数を使ってmovies配列をループし、各映画に対してリスト要素を作成するんだね。
そのとおり！そして、リストアイテムごとに一意のキー属性を含めることを忘れずに、Reactのレンダリングパフォーマンスを最適化するのを助けてね。
- おかしな例
リストのレンダリングのおかしな例があれば教えてもらえる？
もちろん！map()とキーを使って、おかしな動物の名前のリストをレンダリングしてみましょう！
const animals = [
{ id: 1, name: 'Giraffeasaurus' },
{ id: 2, name: 'Hippopotamoose' },
{ id: 3, name: 'Kangaroodle' },
];
function SillyAnimalList() {
return (
<ul>
{animals.map((animal) => (
<li key={animal.id}>{animal.name} 🤣</li>
))}
</ul>
);
}
ハハ、おかしすぎる！map()を使って面白い動物の名前のリストをレンダリングし、各リストアイテムに一意のキーを割り当てたね。
そのとおり！Reactでリストをレンダリングするときは、map()関数を使って一意のキーを割り当てることを覚えておいて、アプリを効率的でメンテナンスしやすくしてね！
- おわりに Reactでのリストのレンダリングは、複数のアイテムを表示するための基本的な概念です。map()関数を使って配列をループし、リスト要素を作成し、常に一意のキーを割り当てることで、レンダリングパフォーマンスが向上します。練習を続けて、Reactアプリでリストをレンダリングする楽しみを味わってください！😄