[react] Key warning

※ 가끔 표출에는 문제가 없지만 아래와 같은 경고창이 발생 할 수 있다. 

: id 지정 후 key 값에 적용해 줘야 함!

 

import React from "react"

// id 지정 후 key값에 적용
const foodLike = [
    {
        id:1,
        name: "kimchi",
        image: "https://search.pstatic.net/common/?src=http%3A%2F%2Fblogfiles.naver.net%2FMjAxNzAzMjFfMTY1%2FMDAxNDkwMDgzNTAxOTAy.RiKsHEGpvqVbqgygh-9kUAQwra4HJL_nbl7vf4AqHjUg.ne42Ah_0CB4RO9aIi3QpPg_FlOkRWQZSAJZNm4kjzW8g.JPEG.mia5472%2F12627997_1675919799335878_1482056349_n.jpg&type=sc960_832"
    },
    {   
        id:2,
        name: "Samgyeopsal",
        image: ""
    },
    {
        id:3,
        name: "bulgogi",
        image: ""
    }
]

function Food({ name, picture }) {
    return (
        <div>
            <h1>I love {name}</h1>
            <img src={picture} alt={name} />
        </div>

    );
}



function App() {
    return (
        <div>
            <h1> Hello FFF!! </h1>
            {foodLike.map(dish => (
                <Food key={dish.id} name={dish.name} picture={dish.image} />
            ))}
        </div>
    );
}


export default App;