[React] 배열을 렌더링할 땐 key가 필요하다

배열을 렌더링할 땐 key가 필요하다.

• 리스트의 각 chind는 반드시 고유한 key prop을 가져야 한다. 그 이유는
  1. 요소들이 순서가 바뀌면 엉뚱한 장소에 렌더링될 수 있기 때문.
  2. 또한 key가 있어야 배열의 변화 과정을 정확하게 알 수 있다.
     (예를들어, [a, b, c]가 [a, c]가 되었을 때, (1)b를 삭제한건지, (2)c를 삭제하고 b를 c로 바꿨는지 key값이 없다면 알 수 없다.
     

  • 최상위 태그에 key prop 지정해주면 됨

  • 배열의 인덱스는 그 때 그 때 배열의 순서에 따라서 부여되기 때문에 키값으로 사용할 수 없음.

    function ReviewList({ items, onDelete }) {
      return (
        <ul>
          {items.map((item) => {
            return (
              <li key={item.id}>
                <ReviewListItem item={item} onDelete={onDelete} />
              </li>
            );
          })}
        </ul>
      );
    }