React Key에 index 지양할 것

참고 React 문서

: https://ko.legacy.reactjs.org/docs/lists-and-keys.html

 

리액트를 사용하다보면 반복문을 사용할때 자식 컴포넌트에 대해 key값을 지정해달라는 console log를 본적이 많습니다.

리액트 문서에서 적혀있듯 순서가 바뀔 수 있는 경우 key값으로 index값을 사용하지 않는 것을 권장하고 있습니다.

 

리액트는 가상의 DOM을 두는데 실제 DOM과 가상의 DOM을 순회하다

차이가 있다면 변화를 적용하고 있습니다.

 

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

 

위의 코드를 보면 하단에 자식 끝에 엘리먼트를 추가할 경우 first와 second는 변화하지 않고

끝에 third만 추가해주면 됩니다.

그런데 만약 가장 상단에 추가하게 될 경우를 살펴본다면,

 

<ul>
  <li>first</li>
  <li>second</li>
</ul>

<ul>
  <li>third</li>
  <li>first</li>
  <li>second</li>
</ul>

 

third가 자식의 가장 상단에 추가함으로서 순서가 모두 변경되어 종속 트리는 그대로 있으나,

first, second, thrid 모두 변경되게 됩니다.

 

이런 문제를 해결하고자 React에서는 key값을 두게 되었습니다.

key값을 두면서 순서만 바뀌면 된다는 사실을 알 수 있습니다.

<ul>
  <li key='001'>first</li>
  <li key='002'>second</li>
</ul>

<ul>
  <li key='003'>third</li>
  <li key='001'>first</li>
  <li key='002'>second</li>
</ul>

 

 

만약 키값이 index로 두었을 경우 순서가 변화함에따라 index가 달라짐으로서

전부 리랜더링 되어버리는 상황이 나타날 수 있습니다.

 

따라서 순서가 변경되는 자식 컴포넌트의 key값으로 index를 주는 것은 성능에 좋지 않을 수 있습니다.