Key의 중요성

map에서 반환되는 모든 엘리먼트에는 해당 항목을 식별할 수 있는 고유하고 안정적인 라벨인 key가 필요합니다:

{todos.map((todo) => <li key={todo.id}>{todo.text}</li>)}

왜일까요? 배열이 변경될 때 React는 이전 목록과 새 목록을 비교합니다. Key는 어떤 항목이 어떤 것인지 알려주므로, React가 엘리먼트를 처음부터 다시 그리는 대신 이동시켜 상태, 포커스, 애니메이션을 그대로 유지할 수 있게 해줍니다.

가장 좋은 key: 데이터의 실제 id입니다. 허용 가능한 대안: 항목별로 고유하고 안정적인 모든 값(과일 이름처럼). 최후의 수단: 배열 인덱스. 위치는 고유한 식별자(identity)가 아니므로 순서 재정렬 시 문제가 발생합니다.