리액트에서 map을 이용해 배열을 렌더링할 때 콘솔창에서 항상
Warning: Each child in a list should have a unique "key" prop.
이라는 경고가 떴다.
그냥 필요한가보다.. 하고 이유는 모른 채 지나갔었는데 오늘 그 이유를 알게 되었다.
const array = ['a', 'b', 'c', 'd'];
array.map(item => <div>{item}</div>);
다음과 같이 key 값이 없는 상태로 배열을 렌더링하는 경우, 새로운 값을 삽입하거나 기존의 값을 지우면 어떻게 될까?
b와 c 사이에 z라는 값을 넣는다면, 리렌더링 시 div 태그 사이에 새로운 div 태그를 삽입하는 것이 아니라 태그 안의 내용을 바꾸면서 맨 마지막에 d가 새로 삽입되는 방식으로 업데이트 된다.
마찬가지로 a를 삭제하였을 경우도 기존의 a가 b로 바뀌고, 그 뒤로 차례차례 값이 땡겨지면서 바뀐다.
const array = ['a', 'b', 'c', 'd'];
array.map((item, index) => <div key={index}>{item}</div>);
다음과 같이 key 값을 넣어주면, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하게 된다! 훨씬 효율적으로 바뀐다 :>
이래서 key값을 넣어주는구나
잘 돌아간다고 넘어가지 말고 검색을 많이 해야겠다고 느꼈다 -_-;;