React의 key prop이 필요한 이유와 index를 key로 사용하면 안 되는 이유를 설명해주세요.

React에서 key prop은 React가 어떤 항목을 변경, 추가 또는 삭제해야 하는지 식별하는 데 필요한 고유한 식별자입니다. React는 이 key를 사용하여 가상 DOM을 효율적으로 업데이트하고, 불필요한 렌더링을 최소화하여 성능을 최적화합니다.

index를 key로 사용하면 데이터가 변경될 때 문제가 발생할 수 있습니다. 예를 들어, 리스트의 중간에 항목이 추가되거나 삭제되면 index가 변경되어 React는 모든 항목을 새로 렌더링해야 한다고 판단할 수 있습니다. 이는 성능 저하를 일으키고, 특히 입력 필드와 같이 내부 상태를 가진 컴포넌트의 경우 예측 불가능한 UI 동작을 초래할 수 있습니다.

따라서 각 항목을 고유하게 식별할 수 있는 id나 고유한 문자열을 key로 사용하는 것이 좋습니다. 이렇게 하면 React는 변경된 항목만 정확하게 업데이트하여 효율적인 렌더링을 유지할 수 있습니다.