[React] Warning: Each child in a list should have a unique "key" prop. 해결 방법

아 이미지 삽입만 남겨두고 포스팅 전부 날아가서 너무 화가난다.

 

이 에러는 재사용된 컴포넌트를 식별할 수 없기 때문에 나타난다.

 

본래의 데이터에 id를 추가하고,

컴포넌트에 key props를 연결해주어야 한다.

 

원래 데이터

const food = [
  {
    name: 'Kimchi',
    image:
      'https://cdn.pixabay.com/photo/2022/06/13/05/14/kimchi-7259268_1280.jpg',
  },
  // ...생략
];

 

수정한 데이터

const food = [
  {
  	id: 1,
    name: 'Kimchi',
    image:
      'https://cdn.pixabay.com/photo/2022/06/13/05/14/kimchi-7259268_1280.jpg',
  },
  // ...생략
 ]

 

원래 컴포넌트

<Food name={dish.name} picture={dish.image} />

 

수정한 컴포넌트

<Food key={dish.id} name={dish.name} picture={dish.image} />

---

 

여기서 특이사항은, key props는 출력이 불가하다는 점이다.

function Food({ key, name, picture }) {
  return (
    <div>
      <h2>{key}</h2>
      <h2>{name}</h2>
      <img src={picture} />
    </div>
  );
}

 

key props는 React 내부에서 사용되는 특별한 속성이기 때문이다.

따라서, 컴포넌트 내부에서 직접 접근하거나 출력할 수는 없다.

 

그저, React가 리스트를 렌더링할 때 각 요소를 식별하는 데 사용될 뿐이다.

 

만약 id를 출력하고 싶다면

function Food({ id, name, picture }) {
  return (
    <div>
      <h2>{id}</h2>
      <h2>{name}</h2>
      <img src={picture} />
    </div>
  );
}

<Food key={dish.id} id={dish.id} name={dish.name} picture={dish.image}/>

 

이런 식으로 별도의 id props를 제작해주어야 한다.