하나를 해결하니 또 하나 발생..

문제 상황 : 동일한 키 값

새 일기를 몇개 등록하니 콘솔창에 위와 같은 경고가 발생했다.
이 경고는 동일한 키를 가진 두 개의 자식 요소를 만났을 때 발생하는 경고이다. React에서는 키(key)가 고유(unique)해야 하며, 키가 중복되면 컴포넌트의 식별성이 유지되지 않을 수 있기 때문에 경고가 발생한다.
이를 해결하기 위해서는 DiaryList 컴포넌트의 자식 요소들에게 고유한 키를 제공해야 한다.

결론

5개의 dummyData로 인해 중복되는 키 값을 가진 자식들이 발생
키값을 dummyData가 끝난 6번부터 등록할 수 있게 코드 변경

// App.js
  const dataId = useRef(0); // 변경 전

  const dataId = useRef(6); // 변경 후

<변경 전> : key=1 중복

<변경 후>