Arr.map 과 key🔑

Warning : Each Child in a list should have a unique "key" prop.

프론트엔드 개발자라면 누구나 한번씩은 보는 콘솔의 빨간 에러... 처음에는 콘솔에 빨간 글씨만 보여도 수정할려고 애를 쓰던 내가 어느순간 없어도 돌아 간다 라는 오만하고 도라이 같은 생각에 안주되어 해당 에러를 무시한지 오래되었다. 그런데 며칠전... 오랫만의 기술면접에

key값을 index로 주셨는데 왜 index 값으로 주셨는지 DOM의 개념과 함께 설명해 주실 수 있을까요?

라는 질문에 머리가 띵해져서 대답을 절고 난 후에 서칭을 해보기 시작했다.

공식문서

리액트 공식문서 설명

키는 각 배열 항목이 어떤 컴포넌트에 해당하는지를 React에게 알려줍니다. 이렇게 하면 React가 나중에 이를 맞춰볼 수 있습니다. 이는 배열 항목이 이동하거나(예: 정렬 때문에), 삽입되거나, 삭제될 수 있는 경우 중요해집니다. 잘 선택된 키는 React가 정확히 무슨 일이 일어났는지를 추론하고, DOM 트리에 올바른 업데이트를 할 수 있도록 도와줍니다.

해당 설명을 쉽게 풀어보면 key의 역할은 배열의 정렬, 삽입, 삭제, 업데이트등의 일을 수행할 때 React가 이러한 변경 사항을 정확하게 추론할 수 있게 하여, 효율적이고 올바르게 DOM 업데이트를 할 수 있게 해준다고 나와있는것을 확인 할 수 있다.

하지만 이 때 map 메쏘드자체에 있는 index 값을 키로 지정하는것이 옳은가? 하면 그건 또 리액트에서 key 값을 사용하는 이유에 반하는 일이 된다.
이유는 간단하다. React가 변경 사항을 정확하게 추론하지 못하기 때문이다!

만약 삽입, 삭제등의 동작이 발생했다고 생각해보자. map함수 자체의 index를 넣은 경우 arr의 길이가 변경되면 데이터의 index 값 또한 변화하게 되고 모든 item 들은 새로운 index 값을 부여받게 될 것이다. 그렇게 되면 arr 내의 모든 값들이 새로운 key값을 부여받아 모두 새로운 항목으로 보일것이고 그럼 모든 값들이 새로 랜더링이 되게 된다. 하지만 만약 항목 고유의 값을 부여하게 된다면 삽입, 삭제등의 동작이 발생하더라도 기존의(변경되지 않은) 데이터는 새로 랜더링 되지 않는다.

정리해보자면

key값은 해당 아이템을 나타내는 고유값이며 배열의 변경(삽입, 삭제 등) 시 어떤 값이 변경되었는지 React가 추론할 수 있는 키이다. 그러므로! map 함수의 index를 key값으로 사용 하는 것은 바람직하지 않다.!

이제 알았으니까 면접 다시보게해주세요... 완벽하게 대답할 수 있어요ㅠㅠㅠㅠㅠㅠㅠㅠㅠ