[React] 배열에 상태를 참조하여 사용했는데 안된다...?!?!

const dummyDate = [
  {
    id: 1,
    emotion: 1,
    content: "오늘의 일기 1번",
    date: 1687513053255,
  },
  {
    id: 2,
    emotion: 2,
    content: "오늘의 일기 2번",
    date: 1687513053256,
  },
  {
    id: 3,
    emotion: 3,
    content: "오늘의 일기 3번",
    date: 1687513053257,
  },
];

처음에 난 이런 배열을 diaryList로 다른 컴포넌트에 넘겨주어 작업을 하려고 하던 중이였다.

 

const [data, dispatch] = useReducer(reducer, [dummyDate]);

 

이렇게 usdReducer 를 활용했다.

 

useEffect(()=> {
    if (diaryList.length >= 1) {
    const firstDay = new Date(
      curDate.getFullYear(),
      curDate.getMonth(),
      1
      ).getTime(); //현재 년, 월의 1일의 시간을 구함

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

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

그리고 다른 컴포넌트에서 넘겨받아 이 코드처럼 사용했다.

 

코드는 간단히 설명하자면 현재 날짜를 기준으로 이번달에 해당되는 데이터만 화면에 출력하는 코드다.

그런데 화면엔 출력이 안되는 문제가 생겼다.

 

왜그럴까 하며 한시간을 들여다 봤다…..

우선, 데이터 자체가 전달이 잘 안된 건 아닐까 싶어서 useEffect 를 활용해 data 에 변화가 생길때마다 출력되게끔 해봤는데

useEffect(() => {
    console.log(data)
    console.log(diaryList)
  },[data])

이렇게 ! 그랬더니 data 는 빈 배열로, diaryList 는 내가 입력했던 데이터가 잘 출력되었다.

???????그럼 왜..!

고민을 하다가 dummyDate 전달하는 과정에서 문제가 있는 건 맞으니 바꿀 수 있는건 다 바꿔보자 ! 해서 막 바꿔보던 중..

아까 App.js 에서 useReducer 를 사용해

 

const [data, dispatch] = useReducer(reducer, [dummyDate]);

 

이렇게 dummyDate 를 사용했었는데 여기가 문제였다.

 

이런 형태로 설정하면, [dummyDate] 라는 배열이 data 의 초기값으로 전달되는데, 이말은 즉, data 가 [dummyDate] 배열로 감싸진 형태가 된다. 이렇게 하면 상태를 참조할 때 data[0] 과 같은 형태로 접근을 해야한다.

내가 한 것 처럼 접근하려면

 

const [data, dispatch] = useReducer(reducer, dummyDate);

이렇게 해야한다.

 

어렵다…………….