12.11 ) Home에서 getMontlyData 작성 중 오류 / 개발자도구 hooks Context 에서 객체가 아닌 함수로 출력됩니다

안녕하세요,

강의 잘 듣고있습니다!

16분 쯤에 montlyData를 만들어서 호출하는 부분인데

개발자도구로 체크해봤을때 hooks가 선생님처럼 나오지 않고 저런 함수 형태?로 출력이 되어서 그런지 오류가 나서 진행이 되지 않습니다ㅜ

눈알빠지게 찾아봤는데도 잘 모르겠어서 글을 씁니다ㅠㅠ

한번 체크 부탁드립니다

//App.jsx 파일입니다

const mockData = [
  {
    id: 1,
    createdDate: new Date("2024-09-30").getTime(),
    emotionId: 1,
    content: '1번 일기'
  }, {
    id: 2,
    createdDate: new Date("2024-09-29").getTime(),
    emotionId: 2,
    content: '2번 일기'
  },
  {
    id: 3,
    createdDate: new Date("2024-08-02").getTime(),
    emotionId: 3,
    content: '3번 일기'
  }
];


function reducer(state, action) {
  switch (action.type) {
    case 'CREATE':
      return [action.data, ...state];
    case 'UPDATE':
      return state.map((item) =>
        String(item.id) === String(action.data.id) ? action.data : item);
    case 'DELETE':
      return state.filter((item) => String(item.id) !== String(action.id));
    default:
      return state;
  }
}

export const DiaryStateContext = createContext();
export const DiaryDispatchContext = createContext();


function App() {

  const [data, dispatch] = useReducer(reducer, mockData);
  const idRef = useRef(3);

  const onCreate = (createdDate, emotionId, content) => {
    dispatch({
      type: 'CREATE',
      data: {
        id: idRef.current++,
        createdDate,
        emotionId,
        content,
      },
    });
  };

  const onUpdate = (id, createdDate, emotionId, content) => {
    dispatch(
      {
        type: "UPDATE",
        data: {
          id,
          createdDate,
          emotionId,
          content,
        }
      })
  }

  const onDelete = (id) => {
    dispatch(
      {
        type: "DELETE",
        id
      }
    )
  }



  return (
    <>
      <DiaryStateContext.Provider value={data}>
        <DiaryStateContext.Provider value={{ onCreate, onUpdate, onDelete }}>
          <Routes>
            <Route path="/" element={<Home />}></Route>
            <Route path="/new" element={<New />}></Route>
            <Route path="/diary/:id" element={<Diary />}></Route>
            <Route path="/edit/:id" element={<Edit />}></Route>
            <Route path="*" element={<Notfound />}></Route>
          </Routes>
        </DiaryStateContext.Provider>
      </DiaryStateContext.Provider>
    </>
  )
}

export default App

return (
  <DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/new" element={<New />}></Route>
        <Route path="/diary/:id" element={<Diary />}></Route>
        <Route path="/edit/:id" element={<Edit />}></Route>
        <Route path="*" element={<Notfound />}></Route>
      </Routes>
    </DiaryDispatchContext.Provider>
  </DiaryStateContext.Provider>
);

   <DiaryDispatchContext.Provider value={{
      onCreate,
      onUpdate,
      onDelete,
    }}>

return (
  <DiaryStateContext.Provider value={data}>
    <DiaryDispatchContext.Provider value={{ onCreate, onUpdate, onDelete }}>
      <Routes>
        <Route path="/" element={<Home />}></Route>
        <Route path="/new" element={<New />}></Route>
        <Route path="/diary/:id" element={<Diary />}></Route>
        <Route path="/edit/:id" element={<Edit />}></Route>
        <Route path="*" element={<Notfound />}></Route>
      </Routes>
    </DiaryDispatchContext.Provider>
  </DiaryStateContext.Provider>
);