タスク5)map関数を適用するときにキーアイテムを付与する理由

人の公式文書を参照して、map 함수 적용시 key props를 부여하는 이유にブログを書いてください.

本人が作成したmap関数使用コードを例として説明してください.

タスク4などのコンポーネントを使用してmap関数を実行すると、リスト内の各項目にキーを追加する必要があることを示す警告が表示されます.

key

keyは、別名リストを作成するときに含める必要がある特殊な文字列ツリービューです.
keyは、reactが変更、追加、または削除するアイテムを決定するのに役立ちます.
keyは、安定した一意性を確保するために、アレイ内の領域に指定する必要があります.<li key = {index}>내용 </ㅣㅑ>この形で使います.特にmapを使用する場合.
しかし、一つ注意事項があります.注意事項は最後に検討する.

構成部品の使用時に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>
  );
}

また、2つの異なる配列を作成する場合、keyは同じキーを使用することもできます.

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}> //같은 키 
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}> //같은 키 
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

注意事項

リアクターはstateで変化した部分だけをキャプチャして再レンダリングします.
配列に要素を追加すると、リアクターは配列の前にバイオリンを再レンダリングしますか?それともバイオリンのみを再レンダリングしますか?
配列のキー値が一意に渡されると、要素は1つだけレンダリングされます.
リアクターは、既存のキー値を新しく追加したキー値と比較して、新しく変更した値を追加およびレンダリングします.
例として、3つの値があると思います.stateを使用して、stateを使用して例を示します.
state値がオブジェクトが存在する配列であると仮定します.

[
{id:0, content:'hello'}
{id:1, content:'hello'}
{id:2, content:'hello'}
]

ここに{id:4,内容:"hello 4"}を追加
次に、反応器は、前の値を現在の値と比較する.では、キー値がidであれば、内容は同じで、追加ではなくid:4値を追加します.これだけ買ってあげます.

なぜmapを使用するときにキー値をindexとして提供できないのか

以上のことを考慮すると,map関数を用いる場合,indexをキー値として与えることはできないことが分かった.
key値をindexとすると、key値をidとする場合とは異なり、その値が先頭に表示されます.

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'}

反応が判断されると、マッチングが変わったと考えられます.
その結果、作業効率が低下し、反応剤が使用できないという利点がある.
したがって、ステータスで配列を管理する場合は、mapを使用するときにキーワードインデックスを使用しないでください.
配列の先頭または中央に新しいデータを入力すると、その部分はスナップできません.
使用したい場合は、データが変化しない場合に使用することをお勧めします.