React 목록에서 입력값이 엉뚱한 행으로 이동한 원인: index key 교체 실험

삭제 뒤 입력 내용이 옆 행으로 갔다

할 일 목록에서 B를 편집한 채 A를 삭제하자 입력 중인 텍스트가 다른 행에 나타났다. 서버 데이터는 맞았고 화면의 로컬 state만 틀렸다. 원인은 key={index}였다.

key를 위치에서 정체성으로 바꿨다

{tasks.map((task, index) => (
  <TaskRow key={index} task={task} />
))}

각 작업이 생성될 때 받은 id를 사용했다.

{tasks.map((task) => (
  <TaskRow key={task.id} task={task} />
))}

map 안에서 매번 UUID를 만들면 렌더마다 key가 바뀌어 포커스와 입력 state가 초기화된다. 식별자는 데이터 생성 시 한 번 정해 저장해야 한다.

작은 재현 테스트

• A, B, C를 만들고 B에 draft를 입력한다.
• A를 삭제한 뒤 draft가 B에 남는지 본다.
• B와 C를 정렬해도 각 행이 state를 따라가는지 확인한다.
• 새로고침 후에도 id가 유지되는지 확인한다.

입력창, 체크박스, 펼침 상태가 있는 목록이라면 삭제·정렬·필터링을 기준으로 key를 정해야 한다.

기억할 기준

key는 몇 번째 줄인지가 아니라 어떤 항목인지 알려 주는 값이다. 목록 순서가 바뀔 수 있다면 index부터 의심하겠다.