위스타그램을 바닐라에서 리액트로 옮기면서 map()을 사용해서 중복되는 컴포넌트들을 출력해줬는데 콘솔에 key 값이 없다는 오류메시지가 뜨는데 동작은 잘되서 key값을 왜 넣어야 하는지 알아보겠습니다.

Key

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

const contentComments = {[
        {
          'id'  : 0,
          'name': 'chanho',
          'text': '안녕하세요 테스트 중입니다!😝'
        }, {
          'id'  : 1,
          'name': 'hoho',
          'text': '위코드으~~😀😀😀😀'
        }];
}
contentComments.map((list) =>
  <li key={list.id}>
    {list.name}
    {list.text}
  </li>
);

key는 다른 항목들 사이에서 고유하게 식별할 수 있는 것을 사용합니다. ex) DB 기본키 처럼
대부분의 경우는 data.id 값으로 key로 사용한다.

렌더링 한 항목에 부여할 id값이 마땅히 없다면 index를 key로 사용할 수 있습니다.

contentComments.map((list, index) =>
  <li key={index}>
    {list.name}
    {list.text}
  </li>
);

하지만 순서가 바뀔 수 있는 경우에는 key에 인덱스를 사용하는 것은 권장하지 않는다!!
이로인해 성능이 저하되거나 state와 관련된 문제가 발생할 수 있다!

만약 리스트에 key를 지정하지 않으면 React는 기본적으로 index를 key로 사용합니다

React

올바른 key 사용법

map() 함수 내부에 element에 key값을 넣어 주는게 좋다.

<div className="main-content">
  {mainContentObj.map(( list ) => (
    <PostContent mainContentObj={list} key={list.id}/>
    ))}
</div>

key는 형제 사이에서만 고유한 값이어야 한다.

key는 배열 안에서 형제 사이에서 고유해야 하고 전체 범위에서 고유할 필요는 없다. 두 개의 다른 배열을 만들 때 동일한 key를 사용할 수 있다.