[React] 'map' 함수 적용 시 'key props' 부여 이유

댓글을 작성하는 기능을 구현하다 보면 같은 Element가 반복됩니다.
React에서는 이런 반복되는 Element를 컴포넌트로 만들어 재사용이 가능한데
바로 이 때 map() 함수가 사용됩니다.

Key 값이 누락된 예시

• 아래의 코드는 React의 컴포넌트인 CommentList를 정의하고 이것을 통해
  댓글 목록을 화면에 렌더링하는 기능을 수행하며 comments라는 배열을 받아서
  그 배열에 있는 각 댓글을 순회하며 화면에 표시합니다.
  

import React from 'react';

function CommentList({ comments }) {
  return (
    <div>
      {comments.map((comment) => (
        <div>
          <h4>{comment.username}</h4>
          <p>{comment.content}</p>
        </div>
      ))}
    </div>
  );
}

export default CommentList;

• 위 코드는 comments.map() 부분에서 key 속성을 지정하지 않고 있습니다.
  
  
• 해당 코드를 실행 시 React는 key가 없다는 경고 메세지를 콘솔에 출력하고
  각 댓글 요소를 고유하게 식별이 불가능 하기 때문에 발생합니다.

그럼 'Key'는 무엇일까?

• Element List를 만들 때 포함해야 하는 특수한 문자열 속성입니다.
• List 내에 각각의 Child(자식 요소)에는 고유한 Key 값이 있어야 합니다.

다음으로 'Key'가 필요한 이유는?

• React는 변경사항이 있을 시 재렌더링을 하고 변경사항이 많지 않은 경우에는
  전체를 재렌더링 하는 것은 비효율적이며 변경사항이 있는 필요한 부분만 재랜더링
  하는 것이 효율적인데 이 때 이것을 알려주는 역할을 담당하는 것이 Key입니다.

'Key'의 주된 기능들

• React가 렌더링을 할 때 바뀐 항목만 선택해 렌더링할 수 있도록 도와줍니다.
  
  
• 부모 컴포넌트에서 지정해주며 자식 컴포넌트 내에서 하지 않습니다.
  
  
• 각각의 요소(List의 Child)가 고유한 정체성을 가지도록 부여합니다.
  
  
• 고유하게 식별이 가능한 값은 모두 가능하지만 주로 data의 ID를 많이 사용합니다.
  
  
• 전체 범위가 아닌 특정 형제 요소들 내에서만 고유(Unique)하면 됩니다.

누락된 Key 값을 추가한 코드

import React from 'react';

function CommentList({ comments }) {
  return (
    <div>
      {comments.map((comment) => (
        <div key={comment.id}>
          <h4>{comment.username}</h4>
          <p>{comment.content}</p>
        </div>
      ))}
    </div>
  );
}

export default CommentList;

• 위 코드와 같이 key={comment.id}: map() 함수 내부에서 반환되는
  각 요소에 key 속성을 추가하면 comment.id를 key 값으로 사용하여
  각 댓글이 고유하게 식별될 수 있게 됩니다.

'Index'로 'Key' 값을 부여할 경우

• index로 key 값을 부여한 경우 데이터가 가장 앞이나 중간에
  들어오게 될 경우 React는 모든 데이터가 변화된 것으로 인지합니다.
  
  
• 따라서 전체 리렌더링을 하게 됨으로 매우 비효율적이며
  key 값을 부여하는 것이 무의미해지고 React의 장점을 활용할 수 없습니다.

Key 사용 시 주의할 점

• key 값은 변하지 않고 예상이 가능하며 유일해야 합니다.
  
  
• 값이 변하는 Key(Math.random()으로 생성된 값 등)를 사용하게 되면
  많은 컴포넌트 인스턴스와 DOM 노드를 불필요하게 재생성하여 성능이 저하되거나
  자식 컴포넌트의 State가 유실 될 수 도 있습니다.

• 참고 자료 링크
  minzzy.log님의 블로그
  Key 사용 시 주의점