key가 중요한 이유

나쁜 예: index를 key로

[
  <li key={0}>Apple</li>,
  <li key={1}>Banana</li>
]

// Orange 추가 시
[
  <li key={0}>Orange</li>,
  <li key={1}>Apple</li>,
  <li key={2}>Banana</li>
]

문제 발생

좋은 예: 고유 ID를 key로 

[
  <li key="a1">Apple</li>,
  <li key="b2">Banana</li>
]

// Orange 추가 시
[
  <li key="o3">Orange</li>,
  <li key="a1">Apple</li>,
  <li key="b2">Banana</li>
]

React: "key가 0인 아이템이 변경됐고, key가 1인 아이템도 변경됐네?"
→ 실제로는 새 아이템이 추가된 것뿐인데, 모든 아이템이 변경된 것으로 인식
→ 불필요한 리렌더링 발생 → 성능 저하 및 DOM 조작 증가

11