TIL 40. React (key)

📌 key

通常、重複するelementリストはreactでmapを使用してstateの値を取得し、stateの情報をelementリストに戻します.

ただし、JavaScriptではmapしか使用できませんが、reactでは重複する要素リストに固有のキー値がある必要があります.

🎈 keyは、reactが変更、追加、または削除するアイテムを識別するのに役立ちます.

Reactは、重複する要素リストを効率的に管理することができる.

例えば、IDが0,1,2,4の要素リストがあると仮定する.

に3というidを追加すると、id 2の後の要素リストから再レンダリングが開始され、3,4に並べ替えて再レンダリングされます.

☝🏻 これらの利点は、コンピュータ処理の速度を向上させることができる.
従って、mapでelementlistを繰り返しレンダリングしようとすると、自動的に数値値を順番に与えることができるindexを用いてキー値に入れるのは、従来の目的を十分に利用していない方法である.

    const list = commentLi.map((el, index) => (
      <li className="feed__comments__list" key={index}>
        <p className="feed__comments__contents">{el}</p>
        <div className="feed__comments__goodBtn">
          <img alt="good__button" src="/images/suyeonkim/dm.png" />
        </div>
        <div className="feed__comments__delBtn">
          <img alt="delete__button" src="/images/suyeonkim/comment.jpg" />
        </div>
      </li>
    ));

に表示されるように、最上位の要素にキーが与えられていますが、各要素にインデックスでキーが与えられているため、キーのコードを正しく使用できません.