KEY STABILITY

key는 위치가 아니라 데이터의 정체성을 가리킨다

리스트가 추가, 삭제, 정렬될 수 있다면 index나 random 값은 상태를 엉뚱한 항목에 붙일 수 있습니다.

key 후보 판단

규칙

id 데이터가 가진 고유 ID는 가장 안정적인 key입니다.

slug 게시글 주소처럼 변하지 않는 고유 문자열은 렌더 사이에도 같은 항목을 가리킵니다.

index 정렬, 삽입, 삭제가 없고 내부 상태도 없을 때만 제한적으로 씁니다.

random 렌더마다 값이 바뀌어 React가 매번 새 항목으로 판단합니다.

Trace

before A, B, C가 있고 B 컴포넌트 내부에 입력 상태가 있습니다.

insert A와 B 사이에 X가 들어오면 index 기반 key는 뒤 항목의 번호를 바꿉니다.

after 고유 id key라면 B의 내부 상태가 계속 B에 남습니다.

{items.map(item => <Todo key={item.id} item={item} />)}