reactJS 배열의 index를 Key로 사용하는 것을 지양하는 이유?

React 공식문서에서 권장하지 않는 사항이라고 한다.

전제는 항목의 순서가 바뀔 수 있는 경우에서이다.

 

항목 값이 변수로 사용되고 key 값을 index로 나타낸다면,

 

항목 값이 변경된다(생성, 수정, 삭제)

-> 해당하는 component가 re-render가 된다

->  React에서 동일한 Key일 경우 동일한 Dom element를 보여준다

 

솔루션이 있을까?

 

1. unique한 key값을 사용한다.

- 자체 생성

- shortid

- uuid

 

2. React 공식 문서에 있는 Robin Pokorny의 말을 인용하면 

 

아래의 세 가지 조건을 만족하면 해당 항목 값을 사용해도 된다고 한다.

1. the list and items are static–they are not computed and do not change;
2. the items in the list have no ids;
3. the list is never reordered or filtered.