우리는 댓글, 게시글 등 리스트안에 있는 요소를 뿌려줄 때 map 함수를 사용합니다.
map 함수를 리액트에서 처음 사용할 때 누구나
이런 에러를 한번 쯤은 마주쳤을 것 입니다. map 함수 사용 시 key값을 주지 않은 경우 뜨는 에러 경고창입니다.
왜 이러한 경고창이 뜨는 걸까요?
map으로 요소를 하나씩 뿌려준다고 할 때 리액트는 state가 바뀔 때 마다 재랜더링을 합니다. 그렇다면 여러개의 리스트 중에 하나의 요소만 바껴도 전체 리스트를 재랜더링해야 할까요?? 이런한 불필요한 재랜더링을 막기위해서 사용하는 것이 바로 map의 키 값입니다. 키 값은 각각의 요소들의 고유의 값이기 때문에 리액트는 이 key값으로 변한 내용인지 아닌지를 구별하고 해당 요소 부분만 변경해주게 됩니다.
이런식으로 키값을 주게되면 에러 메세지도 해결되고 위에서 말한 효율적인 동작을 하게 됩니다.
키값에 index를 주면 안될까요?
리액트 공식문서에 가보시면 밑의 내용이 있습니다.
"인덱스를 key로 사용 중 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있습니다. 컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용됩니다. 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀔 것입니다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있습니다."
리스트안 요소들이 재배열 되지 않는다면 잘 작동 하지만 만약 요소들이 재배열 된다면 키값이 바뀔 것이고 그로 인해 state가 엉망이 될 수도 있는 내용의 문서입니다. 따라서 인덱스를 키값으로 하는 것은 바람직하지 않습니다.
Reference
https://ko.reactjs.org/docs/reconciliation.html#recursing-on-children
https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318
