리액트에서 map을 이용한 렌더링을 할 때 key에 대해 알아야 할 내용, index는 지양하자.

Key를 할당하지 않았을때 나오는 경고

function CommentTemplate({ commentDummy, contentId }) {
  return (
    <div>
      {commentDummy.map((comment) => {

        return (
        //아래와 같이 key를 할당해야 하는 이유
          <div className="comment-template" key={comment[0].id}>
            <Comments
             img={comment[0].user_image_path}
             ...(생략)..
             
            ></Comments>
          </div>
        );
      })}
    </div>
  );
}

위의 코드는 map메소드를 이용하여 배열의 요소를 HTML엘리먼트로 매핑한 모습이다.

 

만약 key를 할당하지 않는다면, 그러니까 다음과 같이 작성하면 다음과 같은 경고가 발생한다.

return (
        //아래와 같이 key를 할당하지 않는다.
          <div className="comment-template" }>
            <Comments
             img={comment[0].user_image_path}

왜 unique한 key가 필요하다는 것일까??

 

Key의 필요성

 

리액트 공식문서에는 다음과 같이 설명하고 있다.

 

Key는 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다. ...(중략).. 대부분의 경우 데이터의 ID를 key로 사용합니다.
항목의 인덱스를 key로 사용하는 것은 최후의 수단입니다. 항목의 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않습니다. 이로 인해 성능이 저하되거나 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다.

리스트 항목에 명시적으로 key를 지정하지 않으면 React는 기본적으로 인덱스를 key로 사용합니다.

 

한 블로그에서 본 설명을 덧붙히자면 

key는 렌더링하면서 어떤 원소가 변경되었는지 빠르게 감지할 때 사용됩니다.
이를 통해 컴포넌트 모두를 다시 렌더링하는 것이 아니라
특정 원소가 있는 곳에만 새로 렌더링 할 수 있게 됩니다.
결과적으로 빠른 렌더링을 이끌 수 있죠.

라고 한다.

 

정리하면 key를 사용할때는 가급적이면 data의 유니크한 값을 사용하자.

 

인덱스를 사용하는 것은 최후의 수단이다.

 

예를들면 인덱스를 사용했을때는 댓글 삭제, 작성처럼 항목들이 재배열되는 경우 오히려 성능이 저하된다고 한다.

 

key는 원소의 이름표가 되는것인데 댓글을 삭제, 작성할때마다 이름표가 바뀌면 곤란할 것 같긴 하다.

 

Key가 없다면??

key를 지정하지 않았다고 해서 리액트가 멈추진 않는다.

 

하지만 key가 설정되어 있지 않다면 VirtualDOM을 순차적으로 비교하면서 찾아내기 때문에

key가 없을 때 보다 속도가 느리다.