React에서 목록을 표시할 때 map() 메소드를 사용할 때 key가 없으면 다음과 같은 Warning이 나옵니다.

키가 없는 목록의 예

const ImageList = (props) => {
  const images = props.images.map((image) => {
    return (
      <img src={image.urls.regular} alt={image.description} /> //keyがない
    );
  });
  return <div>{images}</div>;
};

key에 적절한 값을 추가하면 Warning은 사라집니다만, 왜 key가 필요한지에 대해서는 솔직히 알지 못했습니다.
그래서 이번에는 React에서 목록을 만들 때 각 요소에 key가 필요한 이유에 대해 정리했습니다.

React의 이해가 모호하다고 느끼고 있는 분들의 참고가 되면 다행입니다.

결론

React에서 목록을 만들 때 각 요소에 key가 필요한 이유는 key가 없으면 성능에 영향을 미치기 때문입니다.

설명

다음과 같이 여러 항목 목록에 새 항목을 추가할 때 어떻게 렌더링되는지 생각해 봅시다.

기존 아이템(아무로, 카미유, 쥬도)에 대해서는 이미 렌더링되어 있기 때문에 DOM에 이미 존재하고 있습니다.
여기에 새로운 아이템(배너지)을 추가했을 때, React 내부에서 새롭게 렌더링 하는 리스트와 기존(변경전)의 DOM의 비교를 실시합니다만, key 가 없으면 어느 것이 같은 요소인가 어떤가를 판단하는 것 수 없습니다.
따라서 기존 아이템을 포함한 모든 요소를 ​​렌더링하게 됩니다.


한편, 리스트의 각 요소에 독특한 key를 더해 주면, 기존 DOM과 요소를 비교할 때, key에 의해 같은 요소인지 어떤지를 판단할 수 있게 됩니다.

따라서 새로 추가한 차이의 요소만 렌더링하면 됩니다.

결론

React의 표시 퍼포먼스에 대해서도 몇 개나 기사를 쓰고 있으므로, 참고가 되면 다행입니다. ·

참고 자료