예제 컴포넌트를 다음과 같이 수정해 보세요.

IterationSample.js

import React from 'react';
 
const IterationSample = () => {
  const names = ['눈사람', '얼음', '눈', '바람'];
  const namesList = names.map((name, index) => <li key={index}>{name}</li>);
  return <ul>{namesList}</ul>;
};
 
export default IterationSample;

---

 

이제 개발자 도구에서 더 이상 경고 메시지를 표시하지 않습니다. 확인해 보세요. 고유한 값이 없을 때만 index 값을 key로 사용해야 합니다. index를 key로 사용하면 배열이 변경될 때 효율적으로 리렌더링하지 못합니다.