[React] key prop

React의 key 속성

React에서는 Array.prototype.map처럼 어떤 반복적인 작업을 거쳐 렌더링하는 요소에 key라는 속성을 사용하지 않으면 아래와 같이 경고가 발생한다.

왜 이런 경고를 띄워주는 걸까?

key 속성을 사용해야 하는 이유

React에서 list가 변경될 때, 변경된 부분을 어떻게 비교하는지 살펴보자.

// 변경 전
<ul>
  <li>first</li>
  <li>second</li>
</ul>

// 변경 후
<ul>
  <li>first</li>
  <li>second</li>
  <li>third</li>
</ul>

위의 코드를 비교해 보면, 변경 전의 list의 맨 아래에 third라는 내용이 담긴 <li>이 추가됐다.
사람이 보기에는 변경된 부분이 <li>third</li>가 추가된 것 뿐이지만, React가 인식할 때에도 같을까?
코드를 위에서부터 순서대로 비교를 하기 때문에 지금 같은 경우에는 문제가 없다.

// 변경 전
<ul>
  <li>first</li>
  <li>second</li>
</ul>

// 변경 후
<ul>
  <li>third</li>
  <li>first</li>
  <li>second</li>
</ul>

하지만, 지금과 같은 경우에는 문제가 생긴다.
사람이 보기에는 <li>third</li> 한 줄만 추가된 것이지만,
React는 내용이 모두 바뀐 것으로 인식하여 <ul>의 모든 자식을 변경(리렌더링)한다.

그래서 key라는 속성을 사용하는 것이다.

// 변경 전
<ul>
  <li key="1">first</li>
  <li key="2">second</li>
</ul>

// 변경 후
<ul>
  <li key="3">third</li>
  <li key="1">first</li>
  <li key="2">second</li>
</ul>

위와 같이 key 속성을 사용하면 React가 내부적으로 key값이 같은 list item끼리 비교하여 변경점을 찾기 때문에, key 속성을 사용하지 않을 때보다 성능 면에서 훨씬 효율적으로 관리할 수 있게 된다.

참고: https://ko.legacy.reactjs.org/docs/reconciliation.html#recursing-on-children