React런타임
React key prop 경고 — Each child should have a unique key
Warning: Each child in a list should have a unique "key" prop
한 줄 해결: 리스트 렌더링 시 각 항목에 고유 key를 주지 않아 발생하며, 안정적인 고유 id를 key로 지정하면 됩니다. 배열 인덱스 key는 권장되지 않습니다.
이런 증상일 때
.map으로 리스트를 그릴 때 콘솔에 key 경고가 뜹니다. 동작은 되지만 항목 추가/삭제/정렬 시 렌더 버그(입력값 섞임 등)가 생길 수 있습니다.
원인
- .map 반환 요소에 key를 안 줌
- key로 배열 인덱스를 써서 순서 변경 시 React가 항목을 오인
- 중복된 key 값 사용
해결 방법
1
고유 id를 key로
데이터의 안정적인 고유 식별자를 key로 줍니다.
{items.map(it => <li key={it.id}>{it.name}</li>)}2
인덱스 key 지양
순서가 바뀌거나 추가/삭제되는 리스트에서 인덱스 key는 버그를 부릅니다. 고유 id가 없으면 생성해 두세요.
💡 예방: 리스트 데이터에는 항상 안정적 id를 포함시키고, 인덱스 key는 정적·불변 리스트에만 제한적으로 쓰세요.
Reactkeylistmap렌더링