내가 일하면서 궁금해진 Map의 key

map을 사용할때 나는 key값을 꼭 index로 줬었다.
index값으로 주지말라는 경고를 반대로 생각하고!!
index로 준것이다....😢😱

여기서 궁금증이 생겼다

1. index로 주면 왜 안되는가?

데이터가 변하지 않는 경우에는 index를 사용해도 문제가 없다!
하지만 데이터가 추가되고 삭제되는 경우, 데이터가 변경되면서 reRendering 되고 index가 0부터 다시 mapping 되면서 사이드 이펙트가 발생합니다.

2. 데이터에 고유한 id가 없는 경우는 value값으로 대체해도 되는가?

고유한 식별자라면 사용할 수 있다. 코드로 예를 들어 보자.

const extensionObjects = [
  { language: "English", type: "SRT" },
  { language: "Spanish", type: "VTT" },
];

{extensionObjects.map((ext, index) => (
  <div key={`${ext.language}-${ext.type}`}>
    {ext.language}
  </div>
))}

language와 type을 조합하여 고유한 키를 만들 수 있다면 이런식으로도 사용할 수 있다.