map 을 사용할 때 왜 key 설정을 해야하나? [Today I Learned - React]

설정해줘야하는 이유

각 고유 원소에 key 가 있어야만 배열이 업데이트 될 때 효율적으로 렌더링 될 수 있음

 

 

만약 설정해주지 않으면
map 을 설정한 초기 배열에서 요소를 하나 더 추가하게되면

배열의 요소가 추가되지 않고
배열의 요소들이 교체되듯이 동작한다.

즉, 
[a,b,c,d]라는 배열에서 [a,b,z,c,d]로 업데이트하면
DOM 에서는
c 가 z로 바뀌고, d 는 c 로 바뀌고, 맨 마지막에 d 가 새로 삽입되는 형태가 되어버림

==> 문제는 없지만 아주 비효율적으로 동작하는 것!

 

 

key 설정을 해준다면?

수정되지 않는 기존의 값은 그대로 두고, 
원하는 곳에 내용을 삽입하거나 삭제함!


즉, 배열을 렌더링 할 때 key 값은 매우 중요함.