Each child in a list should have a unique "key" prop.

문제가 되었던 코드

const cartItems = (
    <ul className={classes["cart-items"]}>
      {[{ id: "c1", name: "Sushi", amount: 2, price: 12.99 }].map((item) => (
        <li>{item.name}</li>
      ))}
    </ul>
  );

 

map을 사용할 때는 최상위 태그에 key 값을 할당해주어야 한다. key 값으로 index를 할당할수도 있겠으나, 배열이 재배열될 경우 문제가 발생할 수 있기에

 

const cartItems = (
    <ul className={classes["cart-items"]}>
      {[{ id: "c1", name: "Sushi", amount: 2, price: 12.99 }].map((item) => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );

중복된 값이 key에 할당되지 않도록 key 값에 item 내지는 item의 id를 부여하는 것이 좋다고 한다.