🔖 배열 렌더링 key의 중요성
📌 배운 내용 및 기억하고 싶은 내용
- 배열 렌더링은 map을 사용하여 한다.
- key는 고유의 값을 할당한다. 고유의 값이 없다면 map()의 인자 index도 가능하다.
- key를 사용하지 않으면 리렌더링할때 순서가 보장되지 않아 비효율적으로 업데이트한다.
- key를 사용하면 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제한다.
1
2
3
const array = ['a', 'b', 'c', 'd'];
array.map(item => <div>{item}</div>);
여기서 배열의 b와 c사이에 e를 넣게 되면 기존 c의 자리가 e로 바뀌게 되고 기존 d가 c로 변경되며 d가 마지막에 삽입된다.
배열을 렌더링할때 고유한 key가 있어야하며 고유한 key가 없으면 console에 오류메시지가 나오며 업데이트가 이루어지지 않는다.