[Error, React] Each child in a list should have a unique "key" prop.

Warning: Each child in a list should have a unique "key" prop.
리스트의 각 child는 반드시 고유의 key prop을 갖어야한다.

리액트에서 배열을 map 함수로 풀어낼 때 위와 같은 경고를 접하곤 한다.
리액트는 key prop을 사용하여 컴포넌트와 DOM 요소 간의 관계를 생성하고 이것을 이용해 컴포넌트 리렌더링 여부를 결정한다. 불필요한 리렌더링을 방지하기 위해 각 자식 컴포넌트마다 독립적인 key값을 넣어줘야 한다.

이 경고문을 없애려면 렌더링할 때 최상위 태그에 key prop을 주면 된다.

// items
[
  {
      "id": 1,
      "title": "결백",
      "imgUrl": "",
      "rating": 2,
      "content": "",
  },
  ...
]

items.map((item) => {
  return (
    <li key={item.id}>
          <ReviewListItem item={item} onDelete={onDelete} />
  </li>
)

이 때, 배열의 index는 key로 사용하는건 추천하지 않는다.
배열의 2번 index가 c를 가리키고 있었는데 0번 index가 삭제되면 c는 index 1번이 된다. 이렇게 그때그때 key값이 바뀌면 안되기 때문에 되도록 사용하지 말자.

arr = [a, b, c] //index: 0, 1, 2
// a 삭제
arr = [b, c] // index: 0, 1

아무리 key 값을 줘도 에러가 사라지지 않아서 몇 시간을 고민하는 뻘짓을 했는데 도움을 받아 해결할 수 있었다.
쓸 데 없이 감싸준 Fragment때문이었다.
그냥 아무 생각없이 여러 줄 나올테니 감싸놔야지~ 하면서 써뒀던 저 코드 때문에 몇 시간을 버렸는지..

week.map((day, index) => {
  let RandNum = Math.floor(Math.random() * 5);
  return (
  <>	// 이 녀석이 문제였다.
    <DateList key={index} >
    ...
    </DataList>
  </>