key prop

리액트에서 map 메서드를 이용해 리스트를 반환할 경우 배열에서는
각각의 리스트마다 고유의 key prop을 가지고 있어야 한다 만약 key값을 넘겨 주지 않는다면 아래와 같은 경고 메세지를 만날 수 있다

key prop이란?

• React가 렌더링된 element를 식별하기 위한 prop
• 'key'가 생략 되어있으면, 어떤 element를 업데이트해야하는지 찾지 못해서 제대로 렌더링이 되지 않는다
• 데이터에서 unique한 필드로 key를 활용해야한다

key prop은 왜 사용해야할까?

React는 배열을 렌더링할 때, 요소의 특정 값을 통해 변화를 인식하고, 업데이트를 최적화한다.

이때 요소에 고유성을 부여하는 특정 값이 바로 key prop인데 대부분의 경우 데이터의 id를 key값으로 사용한다. key값의 id를 설정하는 방법에는 여러가지가 있다. 다만 배열의 순서인 index를 id로 사용하는 것은 최대한 지양한다

각 요소가 고유하다는 확신이 있다면 그대로 요소 자체를 key prop으로 사용해도 무방하고 유니크한 값이 따로 없다면

• nanoid() 함수를 사용해서 랜덤한 문자열 반환
• Date.now() 함수를 사용해서 현재 시간의 숫자값 반환
  등으로 id를 설정해 줄 수 도 있다

index를 key값으로의 사용을 지양하는 이유

key값으로 index를 사용할때 배열이 재배열되면 컴포넌트의 state와 관련된 문제가 발생할 수 있다
컴포넌트 인스턴스는 key를 기반으로 갱신되고 재사용되는데 인덱스를 key로 사용하면, 항목의 순서가 바뀌었을 때 key 또한 바뀐다. 그 결과로, 컴포넌트의 state가 엉망이 되거나 의도하지 않은 방식으로 바뀔 수도 있기 때문이다.