[React] 배열의 key값으로 index를 사용하지 말자

Each child in an array should have a unique “key” prop.

배열을 사용하는데 key 값을 까먹고 넣지 않으면 

Each child in an array should have a unique “key” prop.

콘솔창에서 위와 같은 문구를 볼 수 있다.

바로 유니크한 key 값이 필요하다는 것!

 

Key값이 왜 필요한가 ?

<ul>
  <li>첫번째</li>
  <li>두번째</li>  
</ul>

 

<ul>
  <li>첫번째</li>
  <li>두번째</li>  
  <li>세번째</li>  
</ul>

리스트의 엘리먼트를 하나 더 추가하면 두 트리의 변경은 잘 작동하지만,

key 값이 없기 때문에 변경되지 않은 엘리먼트 또한 재평가를 하게된다.

 

이런 문제를 해결하기 위해 key값을 넣어주는것이 좋다. 넣어주어야 한다.

key 값을 넣어주게 되면 key값으로 판단하여 변경된 부분만 추가할 수 있게되기 때문인데,

key 값을 index로 사용하게 되면 배열을 추가하거나 삭제할때 바뀐부분을 찾지 못할 수 있게된다.

 

list가 변경되었을 때 list 가 다시 재평가가 되며 index가 다시 부여 되기 때문이다.

그렇기 때문에 key값에 index를 넣는것은 지양해야 한다.

 

+

 

그래도 정적이고 변경되지 않을 배열에는 사용해도 무방하다.