map Recap

이전 게시글에서 작성한 코드를 실행하면 Warning: Each child in a list should have a unique "key" prop.이 뜬다. 이 전에 favFood를 Array로 만들어서 각각의 item을 구별할 수 있는 고유한 key가 없어서 warning이 뜨는 것이다.

React의 모든 element들은 다르게 보여야 한다.

 

따라서 favFood 각각의 item에 고유한 id를 부여하고

 

Food component에 key props 생성 후 favFood안의 id를 불러와 대입

 

에러가 사라짐. key props는 Food component 자체로 사용되는게 아닌, React 내부에서만 사용. 즉 React가 알 수 있는 고유 id가 부여된 것이다.

 

img elements must have an alt prop, either with meaningful text, or an empty string for decorative images 는 alt={name}을 추가해주면 사라짐. 시각 장애인을 위한 알림이라고 한다.