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

아래와 같은 코드를 작성할 때 

Warning: Each child in a list should have a unique "key" prop. 이와 같은 에러 문구가 발생된다. 

리스트의 원소마다 유니크한 'key' prop를 가져야 된다는 말이다.

리액트의 원소는 유일해야 되는데 원소가 리스트에 포함되면서 유일성이 없어졌기 때문이다.

불러오는 데이터에 id를 추가해 각각 원소마다 유니크한 값을 주고 key props를 불러오면 에러문구는 사라진다.

 

리액트는 컴포넌트가 서로 다르다는 것을 알 수 없기 때문에 이렇게 각각의 유니크한 key props 값을 주어야 한다. 

const foodILike = [
  {
    name: 'banana',
    number: 1,
    image: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.mos.cms.futurecdn.net%2F42E9as7NaTaAi4A6JcuFwG-1200-80.jpg&imgrefurl=https%3A%2F%2Fwww.livescience.com%2F45005-banana-nutrition-facts.html&tbnid=l-xjqYxEGNZh1M&vet=12ahUKEwj9yNbz-aHsAhVWBaYKHX6tAgcQMygAegUIARDOAQ..i&docid=aCmLYEGvNNOXNM&w=700&h=467&q=banana&ved=2ahUKEwj9yNbz-aHsAhVWBaYKHX6tAgcQMygAegUIARDOAQ'
  },
  {
    name: 'apple',
    number: 2,
    image: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fceklog.kindel.com%2F2013%2F02%2F19%2Fwhy-nobody-can-copy-apple%2F&psig=AOvVaw24i-yCbyjsC3oTYYJVpT0Z&ust=1602141940864000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKiZs_35oewCFQAAAAAdAAAAABAD'
  },
  {
    name: 'orange',
    number: 3,
    image: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fsites.psu.edu%2Flifeitmoveson%2Ffiles%2F2017%2F10%2Forange-1hoca2l.jpg&imgrefurl=https%3A%2F%2Fsites.psu.edu%2Flifeitmoveson%2F2017%2F10%2F06%2Foranges-oranges-or-orange-orange%2F&tbnid=D2WcpDH0MYqSvM&vet=12ahUKEwieyJOH-qHsAhWNe94KHTyoAKwQMygHegUIARDcAQ..i&docid=radwS0GOuHUlFM&w=1024&h=768&q=orange&ved=2ahUKEwieyJOH-qHsAhWNe94KHTyoAKwQMygHegUIARDcAQ'
  }
];

class App extends Component {
  render() {
    return(
      <>
        {foodILike.map((dish) => (
          <Food name={dish.name} picture={dish.image}  />
        ))}
      </>
    );
  }
}

 

const foodILike = [
  {
    id: 1,
    name: 'banana',
    number: 1,
    image: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fcdn.mos.cms.futurecdn.net%2F42E9as7NaTaAi4A6JcuFwG-1200-80.jpg&imgrefurl=https%3A%2F%2Fwww.livescience.com%2F45005-banana-nutrition-facts.html&tbnid=l-xjqYxEGNZh1M&vet=12ahUKEwj9yNbz-aHsAhVWBaYKHX6tAgcQMygAegUIARDOAQ..i&docid=aCmLYEGvNNOXNM&w=700&h=467&q=banana&ved=2ahUKEwj9yNbz-aHsAhVWBaYKHX6tAgcQMygAegUIARDOAQ'
  },
  {
    id: 2,
    name: 'apple',
    number: 2,
    image: 'https://www.google.com/url?sa=i&url=https%3A%2F%2Fceklog.kindel.com%2F2013%2F02%2F19%2Fwhy-nobody-can-copy-apple%2F&psig=AOvVaw24i-yCbyjsC3oTYYJVpT0Z&ust=1602141940864000&source=images&cd=vfe&ved=0CAIQjRxqFwoTCKiZs_35oewCFQAAAAAdAAAAABAD'
  },
  {
    id: 3,
    name: 'orange',
    number: 3,
    image: 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fsites.psu.edu%2Flifeitmoveson%2Ffiles%2F2017%2F10%2Forange-1hoca2l.jpg&imgrefurl=https%3A%2F%2Fsites.psu.edu%2Flifeitmoveson%2F2017%2F10%2F06%2Foranges-oranges-or-orange-orange%2F&tbnid=D2WcpDH0MYqSvM&vet=12ahUKEwieyJOH-qHsAhWNe94KHTyoAKwQMygHegUIARDcAQ..i&docid=radwS0GOuHUlFM&w=1024&h=768&q=orange&ved=2ahUKEwieyJOH-qHsAhWNe94KHTyoAKwQMygHegUIARDcAQ'
  }
];

class App extends Component {
  render() {
    return(
      <>
        {foodILike.map((dish) => (
          <Food key={dish.id} name={dish.name} picture={dish.image}  />
        ))}
      </>
    );
  }
}