흔히 발생하는 버그 수정하기

1. 더미데이터와 기본값의 충돌

const dummyData = [
  {
    id: 1,
    emotion: 1,
    content: "오늘의 일기 1번",
    date: 1695280211615,
  },
  // 동일한 더미데이터
  {
    id: 5,
    emotion: 2,
    content: "오늘의 일기 2번",
    date: 1695280211616,
  },
];

function App() {
  const [data, dispatch] = useReducer(reducer, dummyData);

  const dataId = useRef(0);
  
  //이하 코드 생략

위와 같은 더미데이터를 입력하고, local에서 테스트 하는 경우 아래와 같은 메시지를 만날 수 있습니다.

 

Encounter two children with the same이라는 오류인데, 리액트의 useRef로 0을 기본값으로 사용했기에 발생하는 문제입니다.

이런 경우에는 겹치는 부분이 어딘지 확인하여 useRef의 기본값을 바꿔주면 됩니다.

이 경우 개발자 도구의 react의 components를 이용하여 어떤 id가 겹치는지 확인한 다음 해결하면 됩니다.

 

위의 경우에는 useRef(6)부터 시작하게 만들면 해결됩니다.

 

2. 마지막 날짜 처리

달의 마지막 날짜를 지정해서 글을 작성했는데 목록에서 보이지 않았습니다.

useEffect(() => {
  if (diaryList.length >= 1) {
    const firstDay = new Date(
      curDate.getFullYear(),
      curDate.getMonth(),
      1
    ).getTime();

      const lastDay = new Date(
      curDate.getFullYear(),
      curDate.getMonth() + 1,
      0
    ).getTime();

    setData(diaryList.filter((it) => firstDay <= it.date && it.date <= lastDay));
  }
}, [diaryList, curDate]);

이유는 이 코드에서 lastDay의 시간을 지정해주지 않아서 발생한 문제입니다.

마지막 일자가 9/30일 이라면, 30일이 되는 0시까지만 lastDay 로 인식하여 필터링 하게 됩니다.

따라서 시간값을 추가해주면 해결됩니다.

const lastDay = new Date(
  curDate.getFullYear(),
  curDate.getMonth() + 1,
  0,
  23,
  59,
  59
).getTime();