React에서 배열을 랜더링할 때 key를 설정해야하는 이유 그리고 주의점에 대해서 알아보고자 한다.

React에서 배열을 랜더링 하는 코드는 자주 사용된다.

예를 들어 간단한 리스트를 출력한다고 해보자.

const items = ["Apple", "Banana", "Cherry"];

function App() {
  return (
    <ul>
      {items.map((item) => (
        <li>{item}</li>
      ))}
    </ul>
  );
}

이 코드는 정상적으로 동작하지만, 콘솔을 보면 이런 경고가 뜬다.

Each child in a list should have a unique "key" prop.

왜 이러한 경고가 발생하는 것일까?
React의 랜더링 방식을 다시 살펴보면 알 수 있다.

React는 상태가 변경될 때마다 이전 화면과 새로운 화면을 비교해서 바뀐 부분만 업데이트한다.

그런데 key가 없다면 React는 '이 요소가 이전에 있던 그 요소가 맞는지'에 대하여 정확히 판단할 수 없다.

---

const items = ["A", "B", "C"];

이렇게 key가 없을 때는

{items.map((item) => (
  <li>{item}</li>
))}

이 상태에서 "A"가 삭제되면

["B", "C"]

React는 단순히 순서 기준으로 비교하기에

A → B (변경됨)
B → C (변경됨)
C → 삭제됨

즉, 모든 요소가 바뀐 것으로 인식

이것은 단순한 성능 문제에 그치지 않고 실제 UI에 이러한 일이 일어날 경우 예를 들어

• input에 입력한 값이 다른 아이템으로 이동
• 체크박스 상태가 꼬임
• 애니메이션이 이상하게 동작

과 같은 일이 일어날 수 있다

---

그래서 key를 설정해주면

{items.map((item) => (
  <li key={item}>{item}</li>
))}

값이 아닌 key를 기준으로 비교하여

A → 삭제됨
B → 그대로 유지
C → 그대로 유지

필요한 부분만 업데이트를 진행한다

---

주의점

결론부터 말하면 아무 값이나 넣으면 안된다

key는 단순히 값이 있으면 되는 것이 아닌

요소를 안정적으로 식별할 수 있는 값

이어야 한다.

❌ 잘못된 예

<li key={Math.random()}>{item}</li>

• 렌더링될 때마다 값이 바뀜
• React 입장에서는 매번 새로운 요소
  👉 불필요한 재렌더링 발생 (성능 문제)

---

<li key={index}>{item}</li>

• 배열 순서가 바뀌면 key도 같이 바뀜
  👉 다른 요소를 같은 요소로 착각 (버그 발생)

---

✅ 올바른 기준

<li key={item.id}>{item.name}</li>

• 고유하다 (unique)
• 변하지 않는다 (stable)
  👉 이 두 가지 조건이 가장 중요하다

따라서 key는 아무 값이 아닌, 👉 “변하지 않는 고유한 식별자”를 넣어야 한다.