[React] useReducer is not a function

todoReducer.js 파일에다가

import React, { useReducer } from "react";

export const initialState = {
  open: false,
  count: 0,
};
export const todoReducer = (state, action) => {
  switch (action.type) {
    case "TOGGLE":
      return { ...state, open: !state.open };
    case "COUNT":
      return { ...state, count: (count += 1) };
  }
};

이렇게 쓰고 index.js 파일에다가 함수를 import 해서 다음과 같이 썼는데 useReducer is not a function 라는 에러가 떴다

  import { todoReducer, initialState } from "@/store/TodoReducer";
  
 export default function Home(){
  const [state, dispatch] = useReducer(todoReducer, initialState); #문제지점
  }

 

todoReducer.js 파일에다가

export default todoReducer;

추가를 해줬더니 오류가 사라졌다.

 

export default 를 해줘야 하는 이유를 인터넷에 찾아보니 

 

export 할 경우에는 import { 함수명 } from * 으로 사용하는데,
export default 하실 경우에는 import 함수명 from * 으로 사용하게 됩니다.

따라서 내가 {todoReducer} 라고 구조분해할당을 해서 에러가 났던것이었다!