[에러 Error] Warning: Each child in a list should have a unique "key" prop.

에러의 종류

Warning : 경고
Error : 확실한 에러이고, 문제이다.

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

딱히 프로젝트를 작업하면서 작동이 안되지는 않는데, 검사도구에서 새빨갛게 이렇게 떠 있으니까 뭔가 싶었다.

이 내용을 해석 하자면
key값이 prop에 전달되지 않았다.

원인

나 같은 경우는 배열을 이용해서 SideBar를 하나 만들어 줬다.
이 부분에서 map을 사용했는데 key값을 부여 하지 않았다.

사실 Link부분에 key값을 주었는데 경고가 사라지지 않아서 '왜지?' 라고 생각했는데 List인 부분에 key값을 주었어야했다. 생각해보면 당연하다고 생각하다.
html으로 예를 들자면 map을 사용해 list를 보여줄 곳은 li 인데 엉뚱하게 나는 li안에 a에 key값을 주었기 때문이였다.

/* 잘못된 예시*/
<ul>
  <li>
    <a key={item.name}></a>
  </li>
  <li>
    <a key={item.name}></a>
  </li>
</ul>

/* 올바른 예시*/
<ul>
  <li key={item.name}>
    <a></a>
  </li>
  <li key={item.name}>
    <a></a>
  </li>
</ul>

해결

key값을 넣어 주었고, 그 뒤 Warning은 사라졌다.
여기서 짚을것은 map 배열을 사용하고 바로 밑의 자식 컨퍼넌트한테 key값을 넣어주어야한다.

그리고 api로 정보들을 받아올경우에는 아마 내부에 id 값이 존재 할 것이다.
배열을 만들어주는 경우에는 id를 만들어도 되고 나는 name값으로 key값을 넣어줬다.

알게 된 점

구글링 하다 보니, 새로운 점을 알게되었는데 key값은 고유해야한다는 점이고

• index자체가 key 속성의 구성품이 되면 안된다.

index를 키 값으로 사용해도 되는 경우

• 배열과 각 요소가 static이며 computed되지 않고 변지 않아야한다.
• 데이터 내부의 id로 쓸만한 unique 값이 없을 경우
• 데이터가 결고 reordered or filtered 되지 않을 경우
  
  

내가 문제를 해결하고 알게 된 점은 여기까지이고 혹시라도 새로운 정보나 틀린 점이 있다면 댓글을 남겨주길 바랍니다.