react에서 자주 사용하게 되는 map() 함수를 사용할때 element에 key 를 넣어주지 않으면 아래와 같은 에러를 마주하게 된다.
const todos =[{id: "p",text:"play" },{id: "s",text:"sleep" },{id: "e",text:"eat" }]
const todoItems = todos.map((todo) =>
<div
// key={todo.id}
>
{todo.text}
</div>
);
하지만 map()함수는 문제없이 잘 기능을 하는데 과연 이 에러를 왜 뜨는 것 일까?
위의 key의 두가지 역할은 구체적으로 어떤 의미일까?
위의 todos 배열을 map으로 렌더링 한다고 했을 때 play객체와 sleep 객체 사이에 work객체를 삽입한다면, 새로운 div를 삽입하는게 아니라 아래와 같이 작동한다.
💡 play객체
sleep객체 → work객체
eat객체 → sleep 객체
마지막 eat객체 추가
새롭게 추가된 부분 이하 리스트 요소에 전부 영향을 주게된다. 제거또한 변경된 리스트 요소 이하 리스트 요소에 모두 영향을 끼치게 된다.
즉, key가 없는 경우, 변경이 필요하지 않는 리스트의 요소까지 변경이 일어나게 되므로 굉장히 비효율적인 셈이다.
위와 같은 상황에서 key를 넣어준다면?
💡 play 객체
sleep 객체
work 객체 추가
마지막 eat객체 추가
배열이 업데이트 될 때 마다 변경되지 않는 값들은 그대로 있고, 원하는 내용만 삽입하거나 삭제 할 수 있다.