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

반복문을 사용한 부분에 key를 적용했는데도 이런 에러가 뜨고 있어서 확인해보니,,,!!

 

[ 원인 ]

{
    array?.map((item, i) => {
      return (
        <>
          <Card
            key={`array_${i}`}
            item={item}                 
          />
        </>
      );
    })
  }

 

<React.Fragment> 혹은 축약형 <>를 사용할 때 key를 부여해야 하는 경우도 있다. 만약 리스트 아이템을 묶는 <>에 key를 주어야 한다면, 직접 <React.Fragment>를 사용하고 여기에 key를 부여해야한다고 함.

 

< 수정 >

{
    array?.map((item, i) => {
      return (
        <React.Fragment  key={`array_${i}`}>
          <Card
            item={item}                 
          />
        </React.Fragment>
      );
    })
  }