React Key

key의 존재 유무에 따른 업데이트

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가 없을 때 처럼 비효율적으로 업데이트 하는 것이 아닌, 수정되지 않는 기존의 값을 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제한다.

즉 키 값 설정이 렌더링할 때 중요하다는 것을 알 수 있다.