[TECH-QA] 리액트에서 map 사용시 key를 사용하는 이유

리액트에서 map을 사용할 때 각 항목에 고유한 키(key)를 제공해야 하는 이유는 성능 최적화와 리렌더링 관련 문제를 방지하기 위함입니다.

고유한 키를 제공하면 리액트가 가상 DOM(Virtual DOM)에서 각 항목을 정확히 식별할 수 있어, 데이터의 변경 사항을 효율적으로 비교하고 업데이트할 수 있습니다. 즉, 변경된 요소만 다시 렌더링하고 나머지 요소는 그대로 유지하여 불필요한 리렌더링을 줄입니다.

반면, 키를 제공하지 않으면 리액트는 기본적으로 배열의 인덱스를 키로 사용합니다. 하지만 인덱스를 키로 사용하는 것은 리스트의 순서가 변경되거나 항목이 추가/삭제될 때 문제가 발생할 수 있는데 예를 들어, 항목의 순서가 바뀌면 인덱스가 해당 항목의 고유성을 보장하지 못해 리액트가 잘못된 요소를 업데이트하거나 전체 목록을 다시 렌더링하게 될 가능성이 높아집니다.

따라서 키(Key)로는 리스트 내에서 고유하고 안정적인 값(예: 데이터베이스의 ID나 UUID)을 사용하는 것이 권장됩니다. 임시로 생성된 값이나 변동성이 높은 값은 피해야 하며, 키가 고유하지 않으면 리액트가 경고를 출력할 수도 있습니다. 이를 통해 리액트의 재조정(reconciliation) 과정이 최적화되고, 사용자 경험과 애플리케이션 성능이 향상됩니다.

React에서 map으로 리스트를 렌더링할 때 각 항목에 키를 제공하지 않으면, React는 기본적으로 배열의 인덱스(0, 1, 2, ...)를 키로 사용합니다. 이 인덱스는 리스트의 위치를 나타내므로, 리스트의 항목이 고정되어 있고 순서가 절대 변하지 않는다면 문제가 없을 수 있습니다. 하지만 리스트에 항목이 추가되거나 삭제되거나 순서가 변경될 때, 인덱스는 더 이상 해당 항목의 고유성을 보장하지 못하게 됩니다. 이는 React의 재조정(reconciliation) 과정에서 혼란을 일으킵니다.

예를 들어, [A, B, C]라는 리스트가 있다고 가정하고, 각 항목의 키가 인덱스인 경우: A(key=0), B(key=1), C(key=2). 여기서 B가 삭제되면 리스트는 [A, C]가 되고, 키는 A(key=0), C(key=1)로 바뀝니다. 원래 C의 키는 2였는데, 이제 1로 바뀌었습니다. React는 키를 기준으로 항목을 식별하므로, C가 새로운 항목인지, 기존 항목인지 혼란스러워할 수 있습니다. 이로 인해 불필요한 리렌더링이 발생하거나 상태(state)가 엉뚱한 항목에 연결될 수 있습니다.

같은 리스트 [A, B, C]에서 순서가 [B, A, C]로 바뀌었다고 해봅시다.
인덱스를 키로 사용하면: 원래는 A(key=0), B(key=1), C(key=2)였지만, 이제 B(key=0), A(key=1), C(key=2)가 됩니다.
React 입장에서는 키 0이 A에서 B로, 키 1이 B에서 A로 바뀐 것으로 보입니다. 이는 항목 자체가 바뀌지 않았음에도 불구하고 React가 이를 새로운 항목으로 오해하게 만들어, DOM을 불필요하게 업데이트하거나 컴포넌트의 상태(예: 입력 필드 값)를 잘못된 항목에 연결할 수 있습니다.

리스트 항목이 상태(예: 체크박스 선택 여부)를 가지고 있다면, 인덱스를 키로 사용하면 항목의 위치가 바뀔 때 상태가 엉뚱한 항목에 붙을 수 있습니다. 예를 들어, A에 체크가 되어 있었는데 순서가 바뀌면 체크가 B로 이동해버리는 문제가 생길 수 있습니다.

이 문제를 피하려면 리스트 내에서 고유하고 안정적인 값(예: 데이터베이스의 ID, UUID 등)을 키로 사용해야 합니다.

const items = [
  { id: "a1", name: "A" },
  { id: "b2", name: "B" },
  { id: "c3", name: "C" }
];

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

이렇게 하면 순서가 바뀌거나 항목이 추가/삭제되어도 id는 변하지 않으므로 React가 각 항목을 정확히 추적할 수 있습니다.