리액트의 key 속성이 중요한 이유

“Each child in a list should have a unique ‘key’ prop.”  요러한 경고를 많이 보게 되는데 경고 뜨지 않게 하기 위해 index넣고 넘기는 경우도 많았다. 근데 요건 단순히! 식별자 문제 뿐만 아니라, 렌더링 성능과 관련이 있따.

 

리액트는 상태가 바뀔 때마다, 가상돔과 실제 돔을 비교해서 바뀐 부분으 ㄹ 판단하고 렌더링을 하게 되는데 그떄 key가 요 컴포넌트가 바뀐 부분인건지, 재사용 가능인지 판단하는 기준이 된다. 

 

고유한 key를 사용하면 어떤 점이 좋은가에 대해

 

• React가 각 요소의 변경 여부를 정확히 판단 → 불필요한 재렌더링 방지
• 리스트 내 요소를 정확하게 추적 가능 → 상태 꼬임 방지
• 성능 최적화 → 필요한 요소만 리렌더링

반대로, key={index}처럼 단순한 순서를 기준으로 할 경우

리스트 순서가 바뀌거나 항목이 추가/삭제되면 전혀 다른 요소로 판단해서 기존 DOM을 버리고 새로 생성해버림
이럴 경우 렌더링 성능 저하는 물론이고, 상태가 꼬이는 문제도 발생할 수 있다.