[React] 배열 렌더링 시 key props 경고가 뜨는 이유

kihongsi·2022년 1월 6일
0

react

목록 보기
1/1
post-thumbnail

리액트에서 map을 이용해 배열을 렌더링할 때 콘솔창에서 항상
Warning: Each child in a list should have a unique "key" prop.
이라는 경고가 떴다.

그냥 필요한가보다.. 하고 이유는 모른 채 지나갔었는데 오늘 그 이유를 알게 되었다.

key값이 없을 때의 배열 업데이트 방식

const array = ['a', 'b', 'c', 'd'];

array.map(item => <div>{item}</div>);

다음과 같이 key 값이 없는 상태로 배열을 렌더링하는 경우, 새로운 값을 삽입하거나 기존의 값을 지우면 어떻게 될까?

b와 c 사이에 z라는 값을 넣는다면, 리렌더링 시 div 태그 사이에 새로운 div 태그를 삽입하는 것이 아니라 태그 안의 내용을 바꾸면서 맨 마지막에 d가 새로 삽입되는 방식으로 업데이트 된다.
마찬가지로 a를 삭제하였을 경우도 기존의 a가 b로 바뀌고, 그 뒤로 차례차례 값이 땡겨지면서 바뀐다.

key값이 있을 때의 배열 업데이트 방식

const array = ['a', 'b', 'c', 'd'];

array.map((item, index) => <div key={index}>{item}</div>);

다음과 같이 key 값을 넣어주면, 수정되지 않는 기존의 값은 그대로 두고 원하는 곳에 내용을 삽입하거나 삭제하게 된다! 훨씬 효율적으로 바뀐다 :>

이래서 key값을 넣어주는구나
잘 돌아간다고 넘어가지 말고 검색을 많이 해야겠다고 느꼈다 -_-;;


참고자료

벨로퍼트와 함께하는 모던 리액트 - 1장 11. 배열 렌더링하기

0개의 댓글