React 에서 map을 사용할때 Key 값으로 index를 사용하면 안되는 이유

흔히 react 에서 여러 데이터를 렌더링 할때, map() 을 사용한다.

모두가 무조건 겪었을 key 가 없다는 에러를 만나게 되는데,

리액트는 Virtual DOM 을 실제 DOM 과 비교하는 알고리즘을 통해 필요한 부분만 재렌더링 한다.

그래서 각 Element들을 식별할 수 있는 고유한 식별자를 부여하는 것이 바로 key 의 역할이다.

 

공식문서에서는 key 값으로 index 사용을 권장하지 않고있다.

데이터가 재배열 되지 않는다면 문제가 되지 않지만, 재배열이 되는 데이터라고 한다면 비효율 적으로 동작한다.

 

Why?

컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용되는데, 인덱스를 key로 사용하면 항목의 순서가 바뀌었을때,

key도 함께 바뀌게되면서, 의도하지 않은 방향으로 바뀔 수 있습니다.

 

https://codepen.io/pen?editors=0010 

Create a New Pen

위 링크는 공식문서에서 예시로 제공해준, index를 key로 사용했을 때의 발생한 문제 예시이다.