리액트에서 배열을 렌더링할 때 key를 써야 하는 이유
key 값이 필요한 이유는?
- 리액트가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움
- 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 함
즉, key는 그 값이 변하지 않는, 유일한 식별자의 역할을 가짐
고유성 부여를 위해 key 값은, 배열의 각 항목 간 서로를 식별할 수 있게 하는 문자열을 사용하는 것이 좋다.
대부분의 경우 데이터의 id를 key로 사용한다.
key는 엘리먼트의 변화를 감지
// 변경 전
<ul>
<li>🍎</li>
<li>🍌</li>
</ul>
// 변경 후
<ul>
<li>🥕</li>
<li>🍎</li>
<li>🍌</li>
</ul>
새로운 list item으로 <li>🥕</li>를 추가하게 되면 리액트는 list 의 전체 순서가 변한 것으로 인지하여 모든 <li> 태그를 리렌더링 하게 된다.
즉, DOM을 비효율적으로 운영하게 됩니다.
이러한 비효율의 문제를 해결하기 위해 리액트는 key 속성을 지원한다. 자식들이 key를 가지고 있다면, 리액트는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다.
결국 React에서 key를 사용하는 이유는 엘리먼트 혹은 컴포넌트의 변화를 감지하기 위함이고,
그 이유는 효율적인 DOM 사용으로 이어진다.
