[React] React의 key props에 대한 간단 요약

Key

• React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다.
• element에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야한다.
• 다른 항목들 사이에서 고유하게 식별할 수 있는 것을 사용한다.
• 통상적으로 data.id 값을 key로 사용한다.
• 렌더링 한 항목에 부여할 id값이 마땅히 없다면 index를 key로 사용할 수 있으나 순서가 바뀔 수 있는 경우에는 key에 인덱스를 사용하는 것은 지양해야한다. 성능이 저하되거나 state와 관련된 문제가 발생할 수 있기 때문이다.
• 만약 리스트에 key를 지정하지 않으면 React는 기본적으로 index를 key로 사용한다.
• 일반적인 사용법은 map() 등 iterate 하는 함수 내부에 컴포넌트를 생성할때 인자로 key값을 넣어 주는게 좋다.

<ul className="list">
  {itemList.map((item, index) => (
    <Item label={item.label} key={item.id} />
    ))}
</ul>