React - key 속성을 사용하는 이유

React에서 key 속성이란?

Warning: Each child in a list should have a unique "key" prop.
React에서 map 함수를 사용할 때 이러한 경고문을 본적이 있을 것이다.

이는 각 항목에 고유한 key가 있어야 한다는 뜻으로 key는 React가 어떤 항목을 변경, 추가, 삭제할지 식별하는 것을 도운다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 사용되며 배열 내부의 엘리먼트에 지정해야 한다.

예시

const App = () => {
  const number = ["first", "second", "third", "fourth", "fifth"];
  const items = number.map(item => 
    <li>{item}</li>
  );

  return (
    <div>{items}</div>
  )
}

렌더링이 잘 된 것을 확인할 수 있지만

각 항목에 key가 있어야 한다는 경고가 출력된다.

key를 선택하는 가장 좋은 방법은 리스트의 다른 항목들 사이에서 해당 항목을 고유하게 식별할 수 있는 문자열을 사용하는 것이다. 대부분의 경우 데이터의 id를 key로 사용한다.

const App = () => {
  const number = [
    { id: 1, name: "first" },
    { id: 2, name: "second" },
    { id: 3, name: "third" },
    { id: 4, name: "fourth" },
    { id: 5, name: "fifth" },
  ];
  
  const items = number.map(item => 
    <li key={item.id}>{item.name}</li>
  );

  return (
    <div>{items}</div>
  )
}

key를 사용할 때 주의할 점

key가 고유한 값이 아닐 경우

  const number = [
    { id: 1, name: "first" },
    { id: 1, name: "second" },
    { id: 3, name: "third" },
    { id: 4, name: "fourth" },
    { id: 5, name: "fifth" },
  ];

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

id를 key값으로 사용 하였을 때 id에 중복되는 값이 있다면 위와 같은 에러가 출력된다. 동일한 키를 가진 두 개의 자식이 발생하였고, 키는 고유해야하며, 고유하지 않는 키로인해 자식이 중복 및 생략될 수 있다는 경고이다. 그러므로 key로 사용되는 id는 고유한 값이어야한다.

적절한 키 값이 없는 경우

const App = () => {
  const number = [
    { name: "first" },
    { name: "second" },
    { name: "third" },
    { name: "fourth" },
    { name: "fifth" },
  ];
  
  const items = number.map((item, index) => 
    <li key={index}>{item.name}</li>
  );

  return (
    <div>{items}</div>
  )
}

항목에 대한 안정적인 id 값이 없다면 최후의 수단으로 배열의 index를 key로 사용할 수 있다. 항목들의 순서가 바뀌지 않는다면 이 방법도 잘 동작하지만, 순서가 바뀔 수 있는 경우 key에 인덱스를 사용하는 것은 권장하지 않는다. 성능이 저하되거나 컴포넌트의 state와 관련된 예상치 못한 문제가 발생할 수 있기 때문이다.

또한 명시적으로 key를 지정하지 않으면 React는 기본적으로 index를 key로 사용한다.

더 자세한 내용은 아래 링크 참조

인덱스를 key로 사용할 경우 부정적인 영향
왜 key가 필요한가