TIL: 14 React map key

위스타그램을 리액트로 옮길때, map함수를 사용하여 새로 생기는 댓글들을 반복하여 화면에 보여줬을때, 콘솔창에 key가 없다는 오류메세지가 떴다.

key

key는 리액트가 어떤 항목을 추가 변경 삭제할지 식별하는 것을 돕는다. 컴포넌트 배열을 렌더링했을때, 어떤 원소에 변동이 있었나 확인하는 용도이다. key가 없다면 DOM을 비교하는 중에 리스트를 하나씩 보면서 뭐가 바뀌었는지 확인하지만 key가 있다면 이 과정이 조금 더 효율적으로 바뀐다.

key는 확인해야 하는 용도이므로 유일해야하며, 유일하지 않다면 렌더링 과정에서 오류가 난다.

설정

key값은 map한수의 인자로 전달되는 함수 내부에서 컴포넌트 props를 설정하듯이 설정하면 된다

  <div className="comment">
      <div className="commentView" key={props.commentList.id}>
        <span className="commentUserId">sald__ssaed{props.userCount}</span>
        <span className="commentContent"> {props.commentList.txt}</span>
        <span className="commentLike">
          <i className="fa-regular fa-heart" />
        </span>
        <button className="commentDelete" onClick={commentDelete}>
          x
        </button>
      </div>
    </div>

// 댓글 추가
  const addItem = () => {
    return setCommentList([
      ...commentList,
      { id: new Date().getTime(), txt: comment },
    ]);
  };

댓글 추가할 때, new Date().getTime()를 아이디로 줬다. 댓글 생성되는 시간의 밀리세컨는 너무 짧은 시간이라 유일한 key로 설정

const [commentList, setCommentList] = useState([{ id: 1, txt: '댓글' }]);

1. 일단 배열의 요소들을 객체화하자.
2. 그리고 고유한 값을 가질 수 있도록 id값을 정해주자.
   여기서 id는 숫자로 주어졌지만 마음에 드는 것으로 하면 된다. id도 마음대로 지정해 놓은 것이기 때문에 원하는 이름으로 지어 주어도 된다! 고유한 값이기만 하면 된다!
   (단, 고유한 값을 index로 갖는 건 지양하자! index는 순서를 나타내는데, 만약 중간에 있는 리스트가 없어진다면 전체 key값이 변하기 때문이다! 다시 말해, key값은 고유하되 변하지 않는 값으로 넣는 게 안전하다)
3. key값은 map함수가 사용 되는 곳에 넣어준다.
4. li 태그가 리스트가 될 대상이기 때문에, li 태그 안에 key값을 주어 각자 가질 수 있도록 한다.