Key Props

→ Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 도움

리액트 요소를 고유하게 식별하는 데 사용
key 값은 문자열 또는 숫자
동일한 리스트나 배열 내에서 고유해야 함

사용법

⇒ key 값을 부여하지 않으면 error 발생

key prop warning console

const items = [
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' },
  { id: 3, name: 'Cherry' },
  { id: 4, name: 'Date' },
];

<ul>
	{items.map(item => (
		<li key={item.id}>{item.name}</li>
	))}
</ul>

필요성

성능 최적화 : 변경된 부분만 업데이트하고 불필요한 렌더링 방지
유일성 보장 : key는 각 항목을 고유하게 식별

→ key를 제대로 사용하지 않으면 예기치 않은 버그 또는 성능 문제 초래

references
👉 https://velog.io/@jenny87879/React-key-props