react 에서 key를 할당해도 해결 안되는 문제 Warning: Each child in an array or iterator should have a unique “key” prop

react 에서 아래 에러가 뜨면 key 를 할당해서 해결해 주면 된다는 내용은 많이 있다. 흔하고 간단하게 해결할 수 있는 워닝이다.

Warning: Each child in an array or iterator should have a unique “key” prop

그런데 key를 할당해도 여전히 같은 에러가 뜬다. key 값을 map의 index 줬다가, index는 쓰지 말라고 해서 유니크한 값을 줬다가 해봐도 해결이 안된다. 뭐꼬 이거.

혹시나 해서 jsx 안에 감싸는 태그를 지웠더니 에라이 된다.

listVal.map((list,index) => {
  return (
    <> //문제의 코드
      <div key={list.id}>~~</div>
    </>//문제의 코드
  );
};

감싸는 코드가 key보다 더 상위로 인식되서 제대로 인식이 안됐던 것 같다. 저 코드를 지우거나 <div> 같은걸로 바꿔서 key를 할당해 주면 해결.