[TIL] map key

.작성중

 

map의 key 속성을 사용하는 것이 비권장인 주된 이유들은 다음과 같습니다:

 

 성능 이슈: 매번 렌더링할 때마다 변경되는 key를 사용하면, React는 해당 요소와 그 자식들을 매번 새로 생성하고 파괴해야 합니다. 이로 인해 불필요한 리렌더링이 발생하며 성능 저하를 초래할 수 있습니다. 

 

컴포넌트 상태 유지 문제: key가 변경되면, React는 해당 컴포넌트의 상태를 잃어버립니다. 따라서 상태를 유지하려면 안정적인 key를 사용해야 합니다. 

 

인덱스 사용 문제: 배열의 인덱스를 key로 사용하는 것은 안티패턴으로 간주됩니다. 배열에 항목이 추가되거나 제거될 때 인덱스가 변경되므로, 이러한 변경이 컴포넌트의 상태와 관련된 버그를 유발할 수 있습니다. 

 

키 충돌: 유니크하지 않은 key를 사용하면 키 충돌이 발생할 수 있습니다. 이러한 충돌은 예기치 않은 동작과 버그를 유발할 수 있습니다. 따라서, 안정적이고 예측 가능한 key를 선택하는 것이 중요합니다. 

 

일반적으로 데이터의 ID나 해시를 key로 사용하는 것이 좋습니다. 이러한 방법은 컴포넌트의 상태를 올바르게 유지하고, 불필요한 리렌더링을 방지하며, 키 충돌을 피할 수 있습니다.