Warning | Each child in a list should have a unique "key" prop.

🔍 상황

서버에서 받아온 데이터를 자바스크립트 map 함수 사용해 JSX 리스트를 구현 할 경우 아래와 같은 경고 메세지를 확인할 수 있다.

list 내의 각 child는 고유한 "key" 값을 가져야 한다.

🤔 원인?

React는 key Prop을 사용하여 구성 요소와 DOM 요소 간의 관계를 생성한다. 이 관계를 이용하여 컴포넌트의 리렌더링 여부를 결정하므로 독립적인 key값을 넣어 불필요한 리렌더링을 방지해야한다.

// Warning 출력
<ul>
  {["Item1", "Item2", "Item3"].map(item =>
  <li>{item}</li>
  )}
</ul>

// Good
<ul>
  {["Item1", "Item2", "Item3"].map(item =>
  <li key="{item}">{item}</li>
  )}
</ul>

❗ 주의

• 항목을 재 정렬할 때마다 index의 데이터 값이 변경되어 React는 불피요한 렌더링을 하게되므로, index와 같이 정적이지 않은 데이터는 key 값 사용을 지양해야 합니다.

🔗 참고

https://sentry.io/answers/unique-key-prop/