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

이유

React에서 map 함수를 사용할때 key값을 할당 하지않으면 위와 같은 에러 메시지가 뜬다.

React에서 Key는 어떤 항목을 변경, 추가, 삭제할때 식별 해주는 역할을 하기 때문이다.

그래서 엘리먼트에 고유성을 부여하기 위해서는 Key 값을 꼭 할당해주어야 한다.

예시

  comment.map(comment => {
    return (
      <Comment
        key={comment.id}
        id={comment.id}
        userName={comment.userName}
        comment={comment.content}
        isLiked={comment.isLiked}
        deleteComment={deleteComment}
      />
    );
  });
}

내가 인스타그램 클론코딩 중 댓글 컴포넌트 여러개를 map 함수를 통해 구현한 코드이다.

Key 값을 정하는 가장 좋은 방법은 여러 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자를 사용하는 것이다.

대부분의 경우 데이터의 ID를 Key로 사용함. 하지만 사용할만한 ID가 없다면 최후의 수단으로 인덱스를 사용한다.

범위

function Blog(props) {
  const sidebar = (
    <ul>
      {props.posts.map((post) =>
        <li key={post.id}>
          {post.title}
        </li>
      )}
    </ul>
  );
  const content = props.posts.map((post) =>
    <div key={post.id}>
      <h3>{post.title}</h3>
      <p>{post.content}</p>
    </div>
  );
  return (
    <div>
      {sidebar}
      <hr />
      {content}
    </div>
  );
}

const posts = [
  {id: 1, title: 'Hello World', content: 'Welcome to learning React!'},
  {id: 2, title: 'Installation', content: 'You can install React from npm.'}
];

Key는 해당 컴포넌트 안에서는 고유하게 식별되어야 하지만 부모 컴포넌트에서는 고유할 필요가 없다.