React key 속성

개념 설명

리스트 렌더링 시 각 요소를 고유하게 식별하여 React가 효율적으로 DOM을 업데이트할 수 있도록 돕는 특별한 속성.

핵심 포인트

• 배열 인덱스보다는 고유하고 안정적인 값 사용 권장
• key가 변경되면 해당 컴포넌트가 완전히 다시 생성됨
• key가 없으면 React는 순서대로 매칭하여 잘못된 업데이트 발생 가능
• 형제 요소들 간에서만 고유하면 됨 (전체 앱에서 고유할 필요 없음)
• key는 props로 전달되지 않음 (컴포넌트에서 접근 불가)

예시 코드

// ❌ 잘못된 key 사용
function BadList({ items }) {
  return (
    <ul>
      {items.map((item, index) => (
        <li key={index}>{item.name}</li>
      ))}
    </ul>
  );
}