REACT · KEY
key 재조정 전후 비교
리스트 중간에 항목이 삽입되거나 삭제될 때 key가 안정적이지 않으면 컴포넌트 상태가 엉뚱한 항목에 재사용될 수 있습니다.
핵심 구조
reconciliation
old list
A, B, C 렌더링
insert X
중간에 새 항목 삽입
id key
기존 상태가 같은 항목에 유지
index key
위치 기준 재사용으로 상태 오염
old list
→
insert X
→
id key
→
index key
판단 기준
check
고유성
key는 형제 목록 안에서만 고유하면 됩니다.
안정성
렌더마다 바뀌는 random key는 재마운트를 만듭니다.
index 위험
정렬, 삽입, 삭제가 있으면 index key를 피합니다.
상태 보존
React는 key를 기준으로 기존 컴포넌트를 재사용합니다.