map 함수 적용시 key props를 부여하는 이유

🔑 key

리액트 공식문서를 보면 이렇게 정의 되어 있다.

key는 리액트가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 돕는다. 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다.

즉, 리액트는 자동으로 생성한 tag 경우에는 리액트가 추적을 해야 되는데 추적할때 근거가 있어야 한다. 근거로써 리액트한테 key 라는 약속된 props를 부여함으로 리액트가 성능을 높이고, 동작을 하는데 우리가 협조를 해야한다는 것이다. 그러므로 우리는 key값을 부여해줘야 한다.

오늘 보는 코드에도 map 함수에다가 키값을 부여해줌으로써 성능을 높이고 동작을 하는데 협조를 해줬다! (ㅋ)

import React from "react";

const Comment = ({ arr }) => {
  return (
    <ul className="comments">
      {arr.map(e => {
        return (
          <li className="comment" key={e.id}> //key값
            <h1 className="commentUserId">{e.userid}</h1>
            <h1 className="userComment">{e.comment}</h1>
            <button className="deleteBtn">삭제</button>
          </li>
        );
      })}
    </ul>
  );
};

export default Comment;

westagram 을 구현할때 댓글 추가 기능에 댓글리스트를 컴포넌트로 만들어 댓글을 map함수를 이용해 구현해본 코드이다. li태그를 반복해줘야하기 때문에 map 함수 적용시 댓글이 달릴때마다 li가 추가 구현 된다.

항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다. 그 사용으로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있다고 한다.

나는 사실 키값을 인덱스로 줘도 크게 달라질건 없는데 댓글 구현에서는 순서대로 댓글이 달려야 하기 때문에 key 값을 고유값으로 주었고, 우선은 고유값으로 Date now() 함수로 id값을 주고 그 값을 key값으로 설정해주었다.