“key” prop은 무엇이며 element 배열에서 사용하면 어떤 이점이 있나요?

*key는 Element의 배열을 생성할 때 반드시 포함해야하는 특별한 문자열 속성입니다.*

*key 속성은 React가 변경되거나 추가 또는 제거된 항목을 식별하는 데 도움이 됩니다.*

대부분의 경우 데이터의 id를 key로 사용합니다.

const todoItems = todos.map((todo) => <li key={todo.id}>{todo.text}</li>);

렌더링된 항목에 대한 안정적인 id가 없는 경우 최후의 수단으로 항목 index를 키로 사용할 수 있습니다.

const todoItems = todos.map((todo, index) => <li key={index}>{todo.text}</li>);

<aside> 💡 *key를 index 로 사용 시 주의사항

항목의 순서가 변경될 가능성이 있다면 index를 key로 사용하는 것은 권장되지 않습니다. 이는 성능에 부정적인 영향을 미칠 수 있으며 컴포넌트 상태와 관련된 문제를 일으킬 수 있습니다.

• 재사용성 제한
• 불안정한 키
• 렌더링 효율성
• 재정렬 문제*

</aside>