key 속성을 입력했는데도 'Warning: Each child in a list should have a unique "key" prop.' 에러가 발생

해당 에러는 주로 map 함수를 이용해 반복적인 컴포넌트를 생성했을 때 발생한다. 편집기에서 빨간줄 긋고 안내해주는 대로 반복되는 컴포넌트에 key 속성을 추가해주면 문제없이 작동한다.

 

하지만 key 속성을 제대로 추가해줬는데도 자꾸 경고문이 발생해서 잠깐 골치가 아팠다. 

 

경고문 발생 이유는 단순했다. 컴포넌트를 <></> 안에 넣고 <></>까지 포함하여 반복 생성했던 것...

컴파일러가 <></> 까지 자식 컴포넌트로 인식해 key 프롭스가 없다는 경고문을 자꾸 뱉었던 것이었다.