리액트의 key 사용 이유

key값으로 적절한 값과 key지정 위치

🔖 보통 key는 각 데이터를 고유하게 나타내는 값이 되어야한다. 데이터를 외부에서 받아오는 경우, 지정된 고유한 id값 등이 그 예이다. 또한 map으로 렌더링할 경우, 가장 바깥쪽 태그에 지정한다.

arr.map((el, idx) => {
  return <li key={idx}>{el}</li>;
});

UI 렌더링

🔖 key를 지정하면 UI가 변경될 때 리액트가 어떤 부분이 변경된 것인지 식별할 수 있어 불필요한 리렌더링이 방지된다.
✅ ex. 특정 배열에서 요소를 추가하거나 삭제하는 경우, 리액트의 관점에서는 어느부분이 변화했는지 모르기 때문에 전체 요소를 렌더링하여 불필요한 비용이 생긴다. key를 이용해 기준을 부여하면 이를 방지할 수 있다.

직관성

🔖 key를 지정하면 배열의 변화를 리액트에 정확히 전달 가능하다.
✅ ex. 특정 배열에서 요소를 삭제하는 경우, key가 없다면 리액트가 요소가 단순히 삭제된건지, 아니면 다른 요소를 삭제하고 이 요소를 다른 요소로 변경한 건지 알 수 없다. 따라서 key를 지정하고 이를 확실하게 인식시켜 성능을 향상시킬 수 있다.