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

IterationSample.js

import React, { useState } from 'react';
 
const IterationSample = () => {
  const [names, setNames] = useState([
    { id: 1, text: '눈사람' },
    { id: 2, text: '얼음' },
    { id: 3, text: '눈' },
    { id: 4, text: '바람' }
  ]);
  const [inputText, setInputText] = useState('');
  const [nextId, setNextId] = useState(5); // 새로운 항목을 추가할 때 사용할 id
 
  const namesList = names.map(name => <li key={name.id}>{name.text}</li>);
  return <ul>{namesList}</ul>;
};
 
export default IterationSample;

---

 

이번에는 map 함수를 사용할 때 key 값을 index 대신 name.id 값으로 지정해 주었습니다.

코드를 저장하고, 브라우저에서 이전과 같은 결과가 나타나는지 확인하세요.