할 일 목록을 map으로 그리고 있는데, key에 그냥 배열 index를 넣었어요.
{todos.map((todo, i) => (
<li key={i}>{todo.text}</li>
))}
지금은 화면 잘 나오고 아무 문제 없는데, 리뷰에서 "key에 index 쓰지 마라" 지적을 받았어요. 콘솔 경고도 안 뜨고요.
중간에 항목을 추가하거나 삭제할 때, 특히 input 같은 걸 같이 넣어두면 값이 엉뚱한 줄로 옮겨간다는 얘길 들었는데 정확히 왜 그런 건가요? 그럼 key엔 대체 뭘 넣어야 하나요?