React Key란?

React가 리스트의 어떤 항목이 변경/추가/삭제되었는지 식별하기 위해 사용하는 특별한 속성으로 컴포넌트의 identity를 보장합니다.

기본 개념

• key는 React 엘리먼트에 안정적인 고유성을 부여하는 특수 속성
• 형제 요소들 사이에서만 고유하면 되며, 전체 애플리케이션에서 고유할 필요 없음
• props로 접근할 수 없는 특별한 속성 (React 내부적으로만 사용)

등장 배경

• 비효율적인 DOM 업데이트: 리스트가 변경될 때 모든 항목을 다시 렌더링하는 문제
• 잘못된 상태 유지: 컴포넌트 위치가 바뀔 때 상태가 잘못 유지되는 문제
• 성능 저하: 불필요한 컴포넌트 재생성으로 인한 성능 문제

동작 원리

재조정 (Reconciliation) 과정

• 이전 Virtual DOM과 새 Virtual DOM 비교
• key를 통해 엘리먼트 매칭
  • key가 같으면 → 같은 엘리먼트로 인식, 업데이트만 수행
  • key가 없거나 다르면 → 다른 엘리먼트로 인식, 제거 후 재생성
• 최소한의 DOM 조작 수행

관련 개념과 비교

key vs index

• key: 데이터의 고유 ID 사용 (권장)
• index: 배열의 인덱스 사용 (비권장, 특정 상황에서만 허용)

헷갈리기 쉬운 부분

오해: key는 성능 최적화만을 위한 것

실제: 컴포넌트 식별과 상태 관리의 정확성이 주요 목적

오해: key는 props로 접근할 수 있다

function Item({ key, data }) {
  // ❌ key는 undefined
  return <div>{key}</div>
}

function Item({ itemKey, data }) {
  // ✅ 별도 prop으로 전달
  return <div>{itemKey}</div>
}

// 사용
;<Item key={item.id} itemKey={item.id} data={item} />

개념 정리

React의 Key가 무엇인가요?

React의 key는 리스트를 렌더링할 때 각 엘리먼트를 고유하게 식별하기 위한 특별한 속성입니다.

React는 Virtual DOM을 사용하여 효율적으로 UI를 업데이트하는데, 이 과정에서 재조정(Reconciliation)이라는 알고리즘을 통해 이전 Virtual DOM과 새 Virtual DOM을 비교합니다. 이때 리스트의 각 항목이 변경되었는지 추가되었는지 삭제되었는지를 판단해야 하는데, key가 바로 이 판단의 기준이 됩니다.

사용자 목록에 맨 앞에 새 사용자를 추가하는 상황에서 key가 없다면 React는 첫 번째 컴포넌트부터 순서대로 비교하면서 모든 컴포넌트가 변경되었다고 판단하여 전체를 다시 렌더링합니다. 하지만 각 사용자에게 고유한 ID를 key로 지정하면 React는 기존 사용자들은 그대로 두고 새 사용자만 추가하면 된다는 것을 정확히 알 수 있습니다.

key 사용 시 주의할 점은 배열의 index를 key로 사용하는 것을 피해야 한다는 것입니다. 리스트의 순서가 변경되거나 항목이 추가/삭제될 때 index는 변하기 때문에, React가 잘못된 컴포넌트를 재사용하여 상태가 꼬이는 문제가 발생할 수 있습니다.

key는 형제 요소들 사이에서만 고유하면 되며, 전체 애플리케이션에서 고유할 필요는 없습니다. 또한 key는 React 내부적으로만 사용되는 특수 속성이라 props로 접근할 수 없습니다.

핵심 문장

• React key는 리스트 렌더링 시 각 엘리먼트를 고유하게 식별하는 속성
• React의 재조정 알고리즘이 어떤 항목이 변경/추가/삭제되었는지 효율적으로 판단하도록 도움
• 배열 index 대신 데이터의 고유 ID를 사용해야 하며, 이를 통해 불필요한 재렌더링을 방지하고 컴포넌트 상태를 올바르게 유지 가능