React. 리스트 랜더링 자주 있는 오류

리스트 랜더링을 실행한 모습 (좌) Page, (우) Component

(좌) 결과값 , (우) 오류 메세지

 

위와 같이 Component에서 밑줄 오류가 보여도 결과는 잘 나오는걸 볼 수 있는데

그럼 우측 사진에  메세지를 보면,

Missing "key" prop for element in interator라는 문구가 있다.

번역하면 "반복자의 요소에 대한 "key" 속성이 누락되었습니다." 라고 한다.

개발자도구를 실행하면 생기는 unique “key” prop 오류

 

해당 밑줄 오류가 있을 때, 위에 사진처럼 오류가 뜬다.

해결 방법은 꺼낸 데이터에 대한 고유한 키를 사용해주어야 오류를 막을 수 있다.

unique “key” prop 오류 해결

 

<li>태그 안에 키를 index로 줘서

전과 달리 위에 이미지를 보면 밑줄 오류가 사라진 것을 볼 수 있다.