- はじめに このセクションでは、Reactのリストとキーの章の一部として、マッピングコンポーネントについて探求します。マッピングコンポーネントは、データの配列に基づいてReactコンポーネントのリストをレンダリングするのに役立ちます。GeekとGalの会話を通じて、マッピングコンポーネントについてもっと学びましょう！
データのリストがあるときは、
map()
関数を使ってReactコンポーネントのリストを作れるよ！
それってどうやるの？
データの配列を
map()
で反復処理して、リスト内の各アイテムに対して新しいReactコンポーネントを返すだけなの！
- マッピングコンポーネント
タスクの配列をTaskコンポーネントのリストにマッピングする例を見てね：
const tasks = [
{ id: 1, description: '食料品を買う' },
{ id: 2, description: '家を掃除する' },
{ id: 3, description: '洗濯をする' },
];
function Task({ task }) {
return <li>{task.description}</li>;
}
function TaskList() {
return (
<ul>
{tasks.map((task) => (
<Task key={task.id} task={task} />
))}
</ul>
);
}
なるほど！タスクの配列を
map()
で反復処理して、各タスクに対して新しいTaskコンポーネントを作成するんだね。
そのとおり！それから、Reactのレンダリングを最適化するために、タスクIDのような各コンポーネントに一意のキーを追加することを忘れないでね！
- おもしろい例
マッピングコンポーネントのおもしろい例を教えてもらえる？
もちろん！ジョークの配列をJokeコンポーネントのリストにマッピングしてみよう！
const jokes = [
{ id: 1, joke: 'どうしてカップルはジムに行かないの？ 関係がうまくいかないから！' },
{ id: 2, joke: 'どうしてかかしは賞を受賞したの？ 彼は自分の分野で抜群だったから！' },
{ id: 3, joke: 'なぜ科学者は原子を信用しないの？ 彼らはすべてを作り上げるから！' },
];
function Joke({ joke }) {
return <li>{joke.joke} 😂</li>;
}
function JokeList() {
return (
<ul>
{jokes.map((joke) => (
<Joke key={joke.id} joke={joke} />
))}
</ul>
);
}
ハハ、それは面白いね！各コンポーネントに一意のキーを使用して、面白いジョークのリストをJokeコンポーネントにマッピングしたんだ。
そうなの！マッピングコンポーネントを使用するときは、常に最適なパフォーマンスを確保するために一意のキーを使用することを覚えておいてね！
- おわりに
マッピングコンポーネントを使用すると、データの配列に基づいてReactコンポーネントのリストをレンダリングできます。
map()関数を使用して、リスト内の各アイテムに対して新しいコンポーネントを作成することで、コードがよりモジュール化され、保守性が向上します。そして、常にパフォーマンスを向上させるために一意のキーを追加することを忘れないでください！😄