목록을 렌더링할 때 key가 필요한 이유는 무엇인가요?

이렇게 답해 보세요 (핵심 답변)

key는 배열 목록의 형제 엘리먼트 사이에서 각 항목의 고유한 정체성을 식별해, 항목이 추가·삭제·재정렬될 때 React가 이전 상태와 DOM 노드를 정확한 대상에 연결하도록 돕는 표식입니다. 따라서 데이터베이스 ID처럼 항목이 이동해도 변하지 않는 안정적이고 유일한 값을 key로 지정해야 합니다. 반대로 선택된 사용자나 탭이 바뀔 때 하위 폼의 내부 state를 깨끗이 초기화하고 싶다면 컴포넌트의 key를 의도적으로 바꿔 새 인스턴스로 마운트시키는 패턴도 자주 활용합니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

1. 안정적인 key가 있어야 배열 앞쪽에 항목이 추가되거나 순서가 바뀌어도 기존 입력창의 포커스와 내부 state가 엉뚱한 항목에 섞이지 않습니다.
2. key는 React 내부가 정체성 판단에 사용하는 예약 속성이므로 자식 컴포넌트의 일반 props로는 전달되지 않습니다.

면접에서 자주 하는 실수

순서가 바뀌거나 삭제될 수 있는 목록에서 배열 index를 key로 쓰면 상태가 어긋나고, Math.random()처럼 렌더마다 바뀌는 값을 key로 쓰면 매번 컴포넌트가 재마운트되어 성능과 상태가 모두 깨집니다.