JSX에서 key 속성으로 index를 사용할 때 발생하는 문제

React에서 리스트를 렌더링할 때 key 속성에 배열의 index를 사용하는 것은 일반적으로 권장되지 않습니다. 이렇게 하면 여러 문제가 발생할 수 있습니다.

🌈 주요 문제점

🌸 성능 저하:

React가 컴포넌트를 효율적으로 재사용하지 못하게 되어 불필요한 리렌더링이 발생할 수 있습니다.

🌸 상태 유지 문제:

리스트 항목의 순서가 변경되면 (정렬, 추가, 삭제 등) React가 컴포넌트 인스턴스를 잘못 매칭할 수 있습니다.

예를 들어, 첫 번째 항목이 삭제되면 두 번째 항목이 첫 번째 항목의 key(0)를 물려받게 되어 상태가 혼동될 수 있습니다.

🌸 예측 불가능한 동작:

컴포넌트의 상태가 예상치 못하게 유지되거나 초기화될 수 있습니다.

🌈 예시

// 나쁜 예 - index를 key로 사용
{items.map((item, index) => (
  <ListItem key={index} item={item} />
))}

// 좋은 예 - 고유한 ID를 key로 사용
{items.map((item) => (
  <ListItem key={item.id} item={item} />
))}

🌈 권장 사항

가능하면 항목의 고유 ID(예: 데이터베이스 ID)를 key로 사용하세요.

정말 고유한 값이 없을 때만 index를 사용하되, 리스트가 정적이고 변경되지 않을 경우에만 제한적으로 적용하세요.

crypto.randomUUID() 또는 uuid 라이브러리를 사용하여 고유한 키를 생성할 수도 있습니다.

key는 리스트 항목의 안정적인 식별자 역할을 해야 하며, 리스트의 순서가 변경되더라도 동일한 항목에는 동일한 key가 유지되어야 합니다.