const array = ['a', 'b', 'c', 'd'];array.map(item => <div>{item}</div>);위 배열의 b 와 c 사이에 z 를 삽입하게 된다면, 리렌더링을 하게 될 때
<div>b</div>와
<div>c</div>사이에 새 div 태그를 삽입을 하게 되는 것이 아니라, 기존의 c 가 z 로바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입된다
key를 사용할 경우 배열이 업데이트 될 떄 key 가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아니라, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제된다.
bentori nuna