なぜmap関数を適用するときにキーpropsを与えるのか
💻 作成されたコード
function CommentsHyeri(props) {
return (
<>
{props.comments.map(function (data, index) {
return (
<div className="newComments" key={index}>
<ul className="commentsInput">
<li className="userName">harryshumjr</li>
<li className="userTalk">{data}</li>
</ul>
<div className="icon">
<Heart
width="10"
height="10"
/>
</div>
</div>
);
})}
</>
);
}
export default CommentsHyeri;key
KeyREACTがどの項目を変更、追加または削除するかを区別するのに役立ちます.Keyアレイ内部の線分を指定して、element安定した固有性を確保しなければならない.Key他の項目間で一意に識別できるものを使用する.正しい鍵の使用方法
map()関数内に入れるkey値が良い.key使用例が無効です)
function 자식 컴포넌트 (props) {
const value = props.value;
return (
<li key={value.toString()}>
{value}
</li>
);
}正しい例)
function 부모 컴포넌트(props) {
const numbers = props.numbers;
const listItems = numbers.map((number) =>
<자식 컴포넌트 key = {number.toString()} value={number} />
);
return (
<ul>
{listItems}
</ul>
);
}注意事項
リアクターはstateで変更された部分だけをキャプチャして再レンダリングします.
配列内のキー値が一意である場合、再レンダリングされる要素は1つだけです.
なぜmapを使用するときにキー値をindexとして提供できないのか
key: 0, {id:4, content:'ya!'},
key: 1, {id:0, content:'moya'},
key: 2, {id:1, content:'holly'},
key: 3, {id:2, content:'monya'},
key: 4, {id:3, content:'hulkhulk'}配列の先頭または中央に新しいデータを入力すると、その部分はスナップできません.
使用したい場合は、データが変化しない場合に使用することをお勧めします.
Reference
この問題について(なぜmap関数を適用するときにキーpropsを与えるのか), 我々は、より多くの情報をここで見つけました https://velog.io/@kimhr08/map-함수-적용시-key-props를-부여하는-이유テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol