👨‍💻 사건

• 문제를 해결하는중, 키값을 아무 의식없이 index로 넣어주고 있어서, 궁금하여 찾아보았다.

✅ 해결

function ListItem(props) {
	return <li>{props.value}</li>; // 순회를 돌지않는 경우는 key 를 안적는것이 맞다.
}

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> ); // map 함수를 통하여, 순회를 돌 경우에는 key 값을 지정하여 준다.
  return (
    <ul>      {listItems}
    </ul>);
}

순회를 돈다면 key 값을 지정해두는 것이 옳은 방향이고, 그중에서 만약 순서에 상관없는 리스트들이라면 그냥 key값에 index를 두어도 큰 상관이없다.

💭 개선

무지성하게 index를 키값에 넣는 행동은 하지 말아야 겠다.