React로 개발하다보면, 각 child의 key prop이 유일해야한다는 경고 메세지를 본 적 있을 것이다.
이는 반복되는 컴포넌트(혹은 엘리먼트)들을 렌더할 때, key prop이 주어지지 않았을 때 발생하는 경고다.
리액트가 key prop을 사용하는 이유는 무엇일까?
다음 예시에서 살펴보자.
// before
...
return (
<ul>
<li>first</li>
<li>second</li>
</ul>
)
// after
...
return (
<ul>
<li>first</li>
<li>second</li>
✚ <li>third</li>
</ul>
)
위와 같이, 마지막 요소만 추가하는 경우엔 key prop이 없어도 문제없이 추가된 노드만을 그린다.
// before
...
return (
<ul>
<li>apple</li>
<li>banana</li>
</ul>
)
// after
...
return (
<ul>
✚ <li>watermellon</li>
<li>apple</li>
<li>banana</li>
</ul>
)그런데, 새로운 요소가 마지막이 아닌 위치(위의 경우 첫번째)에 추가되는 경우 리액트는 모든 요소가 제자리에 위치하지 않고 있다고 생각하고 자식 노드를 모두 새롭게 그린다. ( = 성능 이슈 발생)
결론
이러한 문제를 해결하기 위해 리액트는 식별자로서 key prop을 제공한다. 자식 노드들이 모두 key prop을 가지고 있다면, 리액트는 key 값으로 이전 트리와 이후 트리를 비교한다. 그러면 새로운 요소가 어디에 위치하든 문제없이 추가된 노드만 그릴 수 있다.
key 값은 변경되지 않는 유일한 값을 넣어주어야 한다. 배열의 index를 넣을 경우, 리액트는 이전의 키값과 같은 아이들의 값을 먼저 가져오기 때문에, 혼란이 생길 수 있다.
(이와 관련된 트러블 슈팅을 최근에 겪었다. 다음 포스팅 예고)
요약
리액트는 식별자로서 key prop을 제공한다. key 값으로 이전 트리와 이후 트리를 비교하여 새로운 요소의 위치 관계 없이 추가된 노드만 그릴 수 있다. (단, key 값은 유일해야하며 자식 노드 모두 key prop을 가져야 한다.)
출처 : https://www.youtube.com/watch?v=6rDBqVHSbgM&list=LL&index=49
