핵심 답변
key는 React가 리스트의 각 아이템을 고유하게 식별하기 위한 특별한 prop입니다.
상태가 변경되어 리렌더링될 때 React는 이전 Virtual DOM과 새 Virtual DOM을 비교(Diffing)합니다. key가 있으면 어떤 아이템이 추가·변경·삭제됐는지 정확히 파악해 최소한의 DOM 업데이트만 수행합니다.
예시 코드
typescript
// 잘못된 예: index를 key로 사용
// 리스트가 재정렬되거나 중간에 항목이 추가·삭제될 때 문제 발생
{items.map((item, index) => <li key={index}>{item.name}</li>)}
// 올바른 예: 고유한 ID 사용
{items.map(item => <li key={item.id}>{item.name}</li>)}핵심 용어
📌 Diffing 알고리즘(Reconciliation)React가 이전 Virtual DOM과 새 Virtual DOM을 비교해 변경된 부분만 실제 DOM에 반영하는 과정입니다.
📌 index를 key로 사용하면 안 되는 이유리스트가 재정렬되거나 중간에 항목이 추가·삭제될 때 index가 바뀌어 React가 잡못된 요소를 재사용하는 버그가 생길 수 있습니다.