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

리액트를 사용하여 map 함수로 배열을 렌더링할 때, item마다 고유한 key prop을 할당해주어야 한다. 그렇지 않으면 다음과 같은 경고 메시지가 나타난다.

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

기존 코드는 아래와 같았다.

  {sliderData.map((item, index) => (
        //To show one at a time
        <div className={index === slide ? "opacity-100" : "opacity-0"}>
          {index === slide && (
            <img
              className="w-full rounded-md transition-all"
              src={item.url}
              alt="/"
            />
   )}

하지만 위 코드에서 key prop을 할당하지 않았기 때문에 경고가 발생했다. 이를 해결하기 위해 key prop을 추가하여 코드를 수정했다.

 <div
          key={item.id}
          className={index === slide ? "opacity-100" : "opacity-0"}
        >
          {index === slide && (
            <img
              className="w-full rounded-md transition-all"
              src={item.url}
              alt="/"
            />
          )}

또한 sliderData에 id 값을 추가하였다.

const sliderData = [
  {
    url: "https://images.unsplash.com/photo-1520986840182-5b15f734c85c?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1178&q=80",
    id: 1,
  },
  {
    url: "https://images.unsplash.com/photo-1471623432079-b009d30b6729?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
    id: 2,
  },
  {
    url: "https://images.unsplash.com/photo-1461838239441-4475121c0b7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80",
    id: 3,
  },
];

분명히 강의 들을 때 공부한 내용인데, 역시 실제로 해보는거랑은 다른거 같다. 확실히 에러나고 찾아보니 더 기억에 남는 듯한 느낌이다.