React 리스트의 key 경고, index를 key로 쓰면 안 되는 이유

핵심 요약

리스트 렌더링의 key는 React가 "어떤 항목이 같은 것인지" 추적하는 식별자다. 경고를 없애려고 배열 index를 key로 쓰면, 항목이 추가·삭제·정렬될 때 React가 엉뚱한 컴포넌트를 재사용해 입력값·체크 상태가 뒤섞이는 버그가 난다. 데이터의 안정적 고유 ID(보통 id)를 key로 써라.

1. 왜 index가 위험한가

맨 앞에 항목을 추가하면 모든 index가 한 칸씩 밀린다 → React는 "내용이 바뀐 같은 항목"으로 오해
그 결과 input에 입력한 값, 포커스, 애니메이션이 옆 항목으로 옮겨간다

2. 올바른 key

// ❌ 순서 바뀌면 꼬임
{items.map((it, i) => <Row key={i} item={it} />)}
// ✅ 안정적 고유 id
{items.map(it => <Row key={it.id} item={it} />)}

3. 함정

고유 id가 없으면 데이터 생성 시 부여(uuid)하거나 안정적 조합 키 사용
정적이고 순서가 절대 안 바뀌는 리스트라면 index도 무방하다
key는 형제 사이에서만 유일하면 된다 — 전역 유일일 필요 없음

자주 묻는 질문

경고만 없애면 되는 거 아닌가요?

index를 넣으면 경고는 사라지지만, 목록 순서가 바뀌는 순간 입력·상태가 뒤섞이는 더 찾기 어려운 버그가 생깁니다. 안정적 id를 쓰는 게 근본 해결입니다.

고유 id가 정말 없으면요?

데이터를 만들 때 uuid 등으로 id를 부여하거나, 절대 변하지 않는 필드 조합을 키로 쓰세요. 순서가 고정된 정적 리스트에 한해서만 index가 안전합니다.