Warning: Each child in a list should have a unique "key" prop. 해결 방법

리스트의 각 child는 반드시 고유한 key prop을 가져야 된다.

 

-> 경고를 없애기 위해서는 최상위 태그에 key prop을 지정해 주면 된다.

 

 

<li>
  <ReviewListItem item={ item } onDelete={ onDelete } />
</li>

위 코드의 최상위 태그 <li>에  고유한 key prop을 지정해준다.

<li key={ item.id }>
  <ReviewListItem item={ item } onDelete={ onDelete } />
</li>

 

위와 같이 코드를 수정하면 더이상 경고메세지가 출력되지 않는 것을 확인할 수 있다.

이런 식으로 배열을 렌더링할 때는 반드시 key를 설정해 주어야 한다.

 

그렇다면 key는 왜 사용해야 하는가?

자세한 내용은 아래 포스팅을 참고하세요.

https://hi-claire.tistory.com/35

[React] 배열에서 key를 사용해야하는 이유