React 리스트 key에 index를 쓰면 왜 상태가 꼬일까: 안전한 key 선택 기준 빠른 답 순서가 바뀌는 리스트에서 index key는 항목의 정체성을 안정적으로 보장하지 못한다. 문제의 핵심은 단순 재렌더링보다 입력값, 포커스, 체크 상태 같은 로컬 상태가 다른 행으로 옮겨 붙는 버그다. 가장 좋은 key는 서버가 준 고유 ID이고, 없으면 렌더 이전 단계에서 한 번만 만든 안정적인 ID를 써야 한다. 추가, 삭제, 정렬 변경이 전혀 없는 정적 목록만 index key의 예외로 볼 수 있다. 목차 흐름으로 보기 시간 흐름으로 이해하기 React에서 key는 무엇을 식별하나 데이터 흐름과 상태 소유권 index key를 성능 문제로만 보면 놓치기 쉬운 점 실전 코드로 보기 서버 ID가 없을 때는 어떻게 준비할까 흔한 안티패턴과 예외 범위 점검할 때 보는 순서 시간 흐름으로 이해하기 흐름으로 보기 흐름 다이어그램 리스트가 처음 렌더링될 때 React는 각 행을 key 로 구분해 기억합니다. 이 값이 안정적이면 React는 "같은 항목이 자리를 옮겼다"라고 이해하기 쉽고, 값이 위치 중심이면 "같은 자리에 다른 항목이 들어왔다"처럼 보게 됩니다. 그래서 중간 삽입, 삭제, 정렬 변경이 일어나는 순간 차이가 크게 드러납니다. index 는 데이터의 정체성이 아니라 현재 위치를 가리키기 때문에, 로컬 상태의 주인이 데이터와 어긋날 수 있습니다. 시간 흐름으로 이해하기 초기 렌더 A(0) , B(1) , C(2) 처럼 각 행이 현재 위치로 식별됩니다. → 중간 삽입 B 앞에 X 가 들어오면 뒤쪽 항목들의 index 가 모두 밀립니다. → index 재배치 데이터는 그대로인데 B , C 의 key 가 달라집니다. → 기존 상태 재사용 React는 이전 위치의 상태를 새 위치의 항목에 이어 붙일 수 있습니다. → 화면 증상 입력값, 포커스, 체크 상태, 펼침 상태가 다른 줄에 남아 보일 수 있습니다. 이 ...