07. Map , Key
Map
export default function MapFruitsPage() {
const fruits = [
{ number: 1, title: "레드향" },//<div>1 레드향 </div>
{ number: 2, title: "샤인머스켓" }, // <div>2 샤인머스캣</div>
{ number: 3, title: "산청딸기" },
{ number: 4, title: "한라봉" },
{ number: 5, title: "사과" },
{ number: 6, title: "애플망고" },
{ number: 7, title: "딸기" },
{ number: 8, title: "천혜향" },
{ number: 9, title: "과일선물세트" },
{ number: 10, title: "귤" },
]
return (
<div>
{fruits.map((el) => (
<div>
<span>{el.number}</span>,
<h1>{el.title}</h1>
</div>
))}
</div>
)
}Key
keyは、Reactが変更、追加、または削除するアイテムを決定するのに役立ちます.keyは、安定した一意性を確保するために、アレイ内の領域に指定する必要があります.
keyを選択する最善の方法は、リスト内の他のアイテム間でアイテムを一意に識別できる文字列を使用することです.ほとんどの場合、データのIDは鍵として使用される.
レンダリングされたアイテムに信頼できるIDがない場合は、最後の方法は、アイテムのインデックスをキーとして使用します.
アイテムの順序が変更される可能性がある場合は、キーにインデックスを使用することは推奨されません.これにより、パフォーマンスが低下したり、構成部品の状態に関連する問題が発生する可能性があります.
Indexをキーとして
indexをキーにするのも良い場合があります以下の3つの条件を満たすとよい.
Reference
この問題について(07. Map , Key), 我々は、より多くの情報をここで見つけました https://velog.io/@y__baam/07.-Map-Keyテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol