서버에서 받아온 데이터를 자바스크립트 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>