React 목록의 key가 없거나 배열 인덱스로 지정됨
목록의 항목 순서가 바뀔 때 React가 항목의 상태와 DOM을 잘못 재사용하는지 확인합니다.
빠른 답변
- 우선 확인할 원인
- 목록 항목을 식별하는 데이터의 안정적인 고유 ID를 key로 사용합니다. 렌더링마다 바뀌거나 배열 인덱스에 의존하는 key는 삽입·삭제·정렬 뒤 항목 상태를 잘못 연결할 수 있습니다.
- 먼저 확인할 항목
- 목록에 삽입·삭제·정렬을 한 뒤 입력값·체크 상태가 다른 행으로 이동하는지 확인합니다.
- 적용 범위
- 현재 증상과 본문에 적은 관찰 조건이 함께 확인된 경우문맥: 바이브 코딩
- 출처
- React
- 출처 확인일
- 2026-08-04
- 최종 검토
- 2026-08-04
- 수정일
- 2026-08-04
- 정정 이력
- 2026-07-29 이후 기록 없음
- 관련 기술
현재 증상
- 화면 동작 오류
- 오래된 데이터 표시
먼저 확인할 항목
목록에 삽입·삭제·정렬을 한 뒤 입력값·체크 상태가 다른 행으로 이동하는지 확인합니다.
map 호출에서 `key`가 없거나 배열 인덱스·Math.random()을 사용하는지 찾습니다.
서버 데이터의 안정적인 ID가 있는지 확인하고 그 값이 렌더링 사이에 유지되는지 비교합니다.
React 개발 콘솔의 key 경고와 실제 항목 상태 이동을 함께 기록합니다.
피해야 할 조치
주의
- 경고를 숨기기 위해 모든 항목에 Math.random()을 넣지 않습니다.
- 데이터 ID가 없다는 이유로 화면 순서를 식별자로 저장하지 않습니다.
환경별 원인과 조치
확인 순서
- 목록을 추가·삭제·정렬한 뒤 입력값과 선택 상태가 다른 항목으로 이동하는지 확인합니다.
map()의key가 데이터 ID인지, 배열 인덱스·난수인지 확인합니다.- 서버 데이터에 안정적인 식별자가 없다면 생성 시점과 저장 위치를 먼저 정의합니다.
- 수정 후 목록 순서를 바꾸어도 각 항목의 상태가 같은 데이터에 남는지 확인합니다.
key 경고만 제거하는 것이 목표가 아닙니다. 항목의 상태가 잘못 재사용되는 실제 화면 동작을 재현해야 합니다.
참고 자료
Keeping list items in order with key | React (새 창에서 열림)
React · 공식 자료 · 확인 범위: key는 React가 항목의 위치가 아니라 항목 자체를 식별하도록 도와야 합니다., 데이터의 안정적인 ID를 key로 사용하고 배열 인덱스는 항목 순서가 바뀌지 않을 때만 제한적으로 사용할 수 있습니다. · 확인일: 2026-08-04