No.10 react의 Key

map 메서드를 활용해서 list를 만드니 다음과 같은 error가 났다!
🤨 이런! 왜 이런 에러가 난걸까 ? (콘솔창에서만 나고 정상 작동하는데 그냥 쓰고싶다..) 영어를 현실적으로 번역기에 돌려보니 다음과 같은 에러라고한다.

👉 목록의 각 자식에는 고유한 "키" props가 있어야 합니다.

//error난 코드

const foodILike = [
  {
    name: "apple",
    image: "🍏"
  },
  {
    name: "banana",
    image: "🍌"
  },
  {
    name: "remon",
    image: "🍋"
  },
  {
    name: "kiwi",
    image: "🥝"
  }
]

class App extends React.Component {
  render(){
    return (
      <>
        {foodILike.map(
          item => <p>
            <span>{item.name}</span> 
            <span>{item.image}</span>
          </p> )}
      </>
    )
  }
}

🤔 고유한 "키"라고 말하니 css때 배운 id가 생각이 나는데, 혹시 리액트도 이런 id를 가져야하는건가?하고 공식 문서를 찾아보니 다음과 같은 말을 볼수있었다.

👉 Key는 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕습니다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 합니다.

리액트의 특성상 실제DOM과 가상DOM을 비교하여 다른 부분을 변경, 추가 해야해서 key를 필요로 하는것같다.(개인적인 생각!) 어쨋든 map을 사용할때, 다음과 같이 해주면 에러를 해결할 수 있다.

//인자값으로 idx를 추가해 p의 key값으로 idx를 넣어주었다.(권장 방식X)
	<>
        {foodILike.map((item, idx)=> <p key={idx}>
            <span>{item.name}</span> 
            <span>{item.image}</span>
          </p> )}
      </>

이 방법은 공식 문서에서 최후의 수단이라고 되어있으며 만약 순서가 바뀌는 경우 인덱스를 사용을 권장하지 않는다라고 나와있다. 따라서 받아올 데이터에 id값이 있다면 그 id값을 활용하는것이 옳바른 방법이다.

//권장 방식
const foodILike = [
  {	
    id: 1,
    name: "apple",
    image: "🍏"
  },
  {
    id: 2,
    name: "banana",
    image: "🍌"
  },
  {
    id: 3,
    name: "remon",
    image: "🍋"
  },
  {
    id: 4,
    name: "kiwi",
    image: "🥝"
  }
]

class App extends React.Component {
  render(){
    return (
      <>
        {foodILike.map( item => 
          <p key={item.id}>
            <span>{item.name}</span> 
            <span>{item.image}</span>
          </p> )}
      </>
    )
  }
}