react 배열 렌더링 시 key 설정 이유와 주의사항

리액트에서 배열을 렌더링할 때 꼭 🔑 key라는 속성을 설정해야 한다. 🔑 key는 리액트가 각 요소를 구분할 수 있게 해주는 유일한 식별자 역할을 하기 때문이다. 🔑 key가 없으면 리액트는 어떤 요소가 변경되었는지 모르게 되고, 그 결과 불필요하게 많은 리렌더링이 발생할 수 있다. 이러면 성능이 떨어지고, 렌더링 결과도 의도치 않게 어긋날 수 있다. ❗

🔑 key를 설정할 때 가장 중요한 점은, 배열 내에서 각 요소가 유일하게 구분될 수 있는 값을 사용해야 한다는 것이다.
흔히 map 함수를 사용해서 배열을 렌더링할 때 🔑 key로 인덱스를 사용하는 경우가 있는데, 이는 좋은 방법이 아니다. 🚫 요소의 순서가 바뀌거나 새로운 요소가 중간에 추가되면 인덱스가 바뀌기 때문이다. 이렇게 되면 리액트가 해당 요소를 제대로 추적하지 못하고, 예상치 못한 버그가 생길 수 있다. 🐛

// 좋지 않은 예시코드 ❌
import React from 'react';

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ItemList;

그래서 🔑 key로는 가능하면 그 요소의 고유한 ID를 사용하는 것이 좋다. ✅ 예를 들어 데이터베이스에서 가져온 데이터라면 각 항목에 고유한 ID가 있을 테니까, 그 ID를 🔑 key로 사용하는 것이다. 이렇게 하면 리액트가 각 요소의 변화를 정확하게 감지하고, 필요한 부분만 효율적으로 업데이트할 수 있다.

// 좋은 예시 코드 ✅
import React from 'react';

const ItemList = ({ items }) => {
  return (
    <ul>
      {items.map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
};

export default ItemList;

위 예시에서 items 배열의 각 항목은 고유한 id를 가지고 있다고 가정한다. 이 id를 🔑 key로 사용함으로써 리액트가 각 요소를 효율적으로 추적할 수 있다.