배열 랜더링 시 key가 없으면 생기는 일들
React와 같은 라이브러리에서 배열을 렌더링할 때 각 아이템에 key 속성을 제공하지 않으면 문제가 발생할 수 있다. 이에 대한 문제와 그 원인은 다음과 같다.
문제점
성능 이슈: key 속성이 없으면 각 배열 아이템을 구분하기 위한 유일한 식별자가 없기 때문에 변경 사항을 추적하기 어려워진다. 이로 인해 성능에 저하가 발생할 수 있다.상태 관리 문제: key 속성이 없으면 가상 DOM에서 각 아이템의 상태를 관리하기 어려울 수 있다.
원인
key 속성은 렌더링된 아이템을 추적하고 동일한 아이템이 변경되었는지 여부를 판단하는 데 사용된다. 이를 통해 변경 사항을 효율적으로 감지하고 최소한의 업데이트만 수행할 수 있게 된다. 따라서 key 속성이 없으면 모든 아이템을 새로 렌더링하게 되며 성능 저하 및 예상치 못한 동작이 발생할 수 있다.
React에서는 다음과 같이 key 속성을 사용한다.
{
items.map((item) => <ItemComponent key={item.id} item={item} />)
}