Reactでリストをレンダリングする際に必要な一意のキー（key）

Reactでリストをレンダリングする際に必要な一意のキー（key）とは、Reactがリストの
各要素を効率的に識別し、更新・削除・再描画を最適化するために必要な属性です。

要するに、map()などでループ処理を行う時は、
”keyと言う変数をループ内に入れておくと警告がでないですむよ！”
という事です。

1. Reactにおけるキー (key) の役割

Reactでは、配列やリストをレンダリングする際に、各要素が一意に識別できるように
keyを使用します。

なぜ必要なのか？

パフォーマンス向上:
- Reactは仮想DOM（Virtual DOM）を使用して効率的にUIを更新します。
- リスト内で要素が追加・削除・順番変更された場合、
  keyを使うことでReactがどの要素が変更されたのかを特定でき、
  必要最小限の更新で済みます。
バグの防止:
- keyがないと、Reactは要素の変更を正確に追跡できないため、
  誤った再描画が発生することがあります。

2. 具体例

キーがない場合

以下のコードでは、keyを指定していません。

tsx

const items = ["Apple", "Banana", "Cherry"];

return (
    <ul>
        {items.map((item) => (
            <li>{item}</li>
        ))}
    </ul>
);

レンダリングは動作しますが、以下のような警告が出ます。

Warning: Each child in a list should have a unique "key" prop.

この警告が出る理由は、Reactがリスト内の各要素を識別できないためです。

キーを指定した場合

keyを設定することで、警告がなくなり、リストが効率的にレンダリングされます。

tsx

const items = ["Apple", "Banana", "Cherry"];

return (
    <ul>
        {items.map((item, index) => (//mapによるループ処理
            <li key={index}>{item}</li>　//liタグの要素にkeyを設定
        ))}
    </ul>
);

ここでのkey={index}またはkey={item}により、Reactはリストの各要素を識別できます。

ループ内のタグの要素としてkeyを設定します。全体を<div>タグで囲って、keyを設定
するのもOK

3. `key`として何を指定すればよいか？

一意の値:
- リスト内で各要素が一意であることを保証する属性や値を指定します。例: ID、ファイル名、ユニークなプロパティなど。
適切な例:　tsxコード
{images.map((image) => ( <div key={image.name}> <img src={image.url}
alt={image.name} /> </div> ))}
index を使う場合:
- 要素に一意の識別子がない場合、配列のインデックス（mapの第2引数）をkeyとして使うこともできます。
例:tsxコード
{items.map((item, index) => ( <li key={index}>{item}</li> ))}
注意: インデックスを使うのはあまり推奨されません。
リストの順序が変わったり、要素が動的に追加・削除されると、
正しく追跡できなくなる可能性があります。

4. Reactがキーを必要とする状況

以下の場合、Reactはkeyを必要とします。

リストレンダリング

tsx

const items = ["Apple", "Banana", "Cherry"];
return (
    <ul>
        {items.map((item) => (
            <li key={item}>{item}</li>
        ))}
    </ul>
);

コンポーネントのリスト

tsx

const images = [
    { id: 1, name: "image1.jpg", url: "/path/to/image1.jpg" },
    { id: 2, name: "image2.jpg", url: "/path/to/image2.jpg" },
];

return (
    <div>
        {images.map((image) => (
            <ImageComponent key={image.id} image={image} />
        ))}
    </div>
);

5. 不適切な`key`を指定した場合の問題

keyを適切に指定しないと、次のような問題が起こります。

パフォーマンスの低下:
- Reactがどの要素が更新されたのか正確に特定できないため、
  リスト全体を再描画する必要があります。
バグの発生:
- 入力フィールドやアニメーションなど、状態を持つコンポーネントで
  状態が正しく引き継がれなくなる場合があります。

6. まとめ

keyは、Reactがリスト要素を効率的に識別するための
一意の値を指定する属性です。
推奨されるkeyの値は、リスト内で一意であるプロパティ（例: id, name）。
必要に応じて、配列のインデックスを使うことも可能ですが、
動的なリストには適していません。

適切にkeyを設定することで、Reactのレンダリングが効率的に行われ、
バグを防ぐことができます。