[React] map 함수 적용시 key props를 부여하는 이유

React에서 map 함수를 사용할 때 렌더링엔 문제가 없지만 console 창에 이렇게 뜰 때가 있다.

mapping하는 과정에서 배열의 각 요소마다 고유한 key 값을 지정해줄 수 있는데, 그것을 생략하면 저런 오류가 뜬다!

그래서 ⭐ list 내의 각 child에는 고유한 key 값이 있어야한다. ⭐

 

 

🔥왜 key 값을 줘야할까?

React는 렌더링 할 때 기존 배열과 새로운 배열을 비교해서 변경된 부분만 다시 렌더링한다.
따라서 요소가 변경되었을때 더 빠르고 효율적으로 렌더링 하기 위해 요소 고유의 key 값을 준다.

 

 

 

참고 사이트 ▶ 리스트와 Key - React