기본적으로 DOM 노드의 자식에 대해 반복 할 때 React는 두 자식 목록을 동시에 반복하고 차이가 있을 때마다 돌연변이를 생성합니다.(virtual dom diff를 써서 확인)
이 문제를 해결하기 위해 React는 key속성을 지원 합니다. 자식에 키가 있으면 React는이 키를 사용하여 원래 트리의 자식을 후속 트리의 자식과 일치 시킵니다.
키를 사용할 때 주의할 점
색인(index)을 키로 사용하면 재정렬로 인해 구성 요소 상태에 문제가 발생할 수도 있습니다. 구성 요소 인스턴스는 해당 키를 기반으로 업데이트 및 재사용됩니다. 키가 색인인 경우 항목을 이동하면 변경됩니다. 결과적으로 제어되지 않은 입력과 같은 구성 요소 상태가 예기치 않게 혼합되고 업데이트 될 수 있습니다.
그렇기 때문에 key 값은 언제나 고유해야 합니다.
키를 선택하는 가장 좋은 방법은 형제 중에서 목록 항목을 고유하게 식별하는 문자열을 사용하는 것입니다. 대부분의 경우 데이터의 ID를 키로 사용합니다.
렌더링 된 항목에 대해 안정적인 ID가없는 경우 최후의 수단으로 항목 색인을 키로 사용할 수 있습니다.
