[React] 왜 key는 list에서만 필요할까? 왜 index를 key로 사용하면 안되는 걸까?

<ul>
  <li>1</li>
  <li>1</li>
  <li>1</li>
</ul>

<ul>
  {[1, 1, 1].map(v => <li>{v}</li>)}
</ul>

위의 두 코드는 서로 같은 결과는 내는데, 아래의 코드는 react에서 경고를 뿜어낸다.

각 element가 고유한 key값을 가져야 한다는 것.

이 key를 넘겨줘야 하는 이유는 list의 각 요소에 대해 react에서 key를 임의로 부여하기 어렵기 때문이다.

 

<ul>
  {[1, 1].map(v => <li>{v}</li>)}
</ul>

이 코드를 보자. 요소가 3개에서 2개로 줄었는데, 첫 번째가 사라진건지, 중간에 있던 게 사라진건지, 아니면 마지막 요소가 사라진건지 리액트 입장에서는 알 수 없다.

따라서 개발자가 정해줘야 하는 것이다.

 

<ul>
  {[1, 1, 1].map((v, index) => <li key={index}>{v}</li>)}
</ul>

그렇다고 이렇게 index로 정해주면 안된다.

첫 번째 요소가 삭제되어도, 두 번째 요소가 삭제되어도, 세 번째 요소가 삭제되어도 index는 0, 1, 2에서 0, 1로 변한다.

즉 0, 1, 2에서 0, 1이 되었다고 해서 마지막 요소가 삭제되었다고 보장할 수 없다.

각 요소에 부여된 index 값이 unique하긴 하지만 permanent하지 않기 때문.

unique과 permanent 둘 다 엄격하게 보장할 필요가 있다.

 

사실 저게 아무런 의미가 없는게, react는 개발자가 key를 넘겨주지 않은 경우 index 값을 key로 사용한다. 즉 index를 key로 쓰는 건 안 쓰는 것과 완전히 같은 쓸데없는 짓이라는 것.

 

저렇게 하는 경우, 마지막 요소가 아닌 요소를 삭제하는 경우 문제가 발생한다.