key를 "리스트 렌더 경고 끄기 위한 prop"으로 아는지, 재조정(reconciliation)에서의 정체성 매핑까지 잡는 사람인지를 가른다.
React의 key는 리스트 아이템의 _정체성_을 알려주는 식별자라, 재렌더 시 어떤 엘리먼트가 어떤 컴포넌트 인스턴스에 매핑되는지를 결정한다. index를 key로 쓰면 데이터는 같은데 위치가 바뀐 경우(삽입·삭제·정렬) 같은 데이터가 다른 key를 갖게 되어, React는 "새 항목이 들어왔다"가 아니라 "기존 컴포넌트 내용이 바뀌었다"로 잘못 본다. 그 결과 행의 useState 값, 포커스, 애니메이션이 다른 행으로 옮겨붙거나 사라진다. 정렬/필터링이 없는 _완전 고정 리스트_가 아니라면 서버 ID나 도메인 고유값을 key로 써야 안전하다.
정렬 토글 후 다른 행의 입력값이 옮겨붙는 버그를 잡아본 적이 있다면 key→정체성 이야기로 자연스럽게 풀 수 있다
ID가 없는 데이터에서 도메인 필드를 조합해 안정 key를 만든 적이 있다면 그 선택 기준을 답변 후크로 쓸 수 있다
DnD 라이브러리에서 key 전략을 바꿔 애니메이션을 살린 경험이 있다면 컴포넌트 보존과 연결할 수 있다
아직 공개된 답변이 없어요. 첫 공개 답변을 남겨보세요.