key 에러
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를 넣어줘야하는 이유
- key 는 react가 어떤 아이템이 변경, 추가,삭제되었는 지를 인식하는 데 도움을 준다.
- key는 엘리먼트에 안정적인 고유성을 부여해준다.
위의 key의 두가지 역할은 구체적으로 어떤 의미일까?
- 만약 key가 없다면?
위의 todos 배열을 map으로 렌더링 한다고 했을 때 play객체와 sleep 객체 사이에 work객체를 삽입한다면, 새로운 div를 삽입하는게 아니라 아래와 같이 작동한다.
💡 play객체
sleep객체 → work객체
eat객체 → sleep 객체
마지막 eat객체 추가
새롭게 추가된 부분 이하 리스트 요소에 전부 영향을 주게된다. 제거또한 변경된 리스트 요소 이하 리스트 요소에 모두 영향을 끼치게 된다.
즉, key가 없는 경우, 변경이 필요하지 않는 리스트의 요소까지 변경이 일어나게 되므로 굉장히 비효율적인 셈이다.
- key가 있다면?
위와 같은 상황에서 key를 넣어준다면?
💡 play 객체
sleep 객체
work 객체 추가
마지막 eat객체 추가
배열이 업데이트 될 때 마다 변경되지 않는 값들은 그대로 있고, 원하는 내용만 삽입하거나 삭제 할 수 있다.
key 잘 사용하는법
- key는 고유한 요소여야한다. (중복되면 안됨)
- key는 map()내부의 요소에 넣어주기
- key는 주변 배열의 컨텍스트에서만 의미가 있기 때문에
- 아이템의 순서가 바뀔수 있는 경우 key에 index 사용하지 않기
- 성능이 저하되거나 컴포넌트의 state에 따른 문제가 발생할 수 있음
- 만약 key를 넣어주지 않으면 기본적으로 react는 index를 키로 사용
