//변경 전
//context를 통해 value객체를 전달
const TodoContextProvider = ({ children }) => {
  const [todos, dispatch] = useReducer(reducer, []);

  //생략..
  return (
    <TodoContext.Provider value={{ loading, warningVisible, todos, dispatch, todoCount, doneCount }}>
      {children}
    </TodoContext.Provider>
  );
};

//context로부터 value객체를 받아서 사용(value객체가 매번 새로 생성되므로 TodoInput도 새로 렌더링됨)
const TodoInput = () => {
  const { dispatch } = useTodoContext();

  //생략..
}

//---------------

//변경 후
//context를 둘로 나누어서 value에 dispatch를 값으로써 전달
const TodoContextProvider = ({ children }) => {
  const [todos, dispatch] = useReducer(reducer, []);

  //생략..
  return (
    <TodoContext.Provider value={{ loading, error, todos, todoCount, doneCount }}>
      <DispatchContext.Provider value={dispatch}>
        {children}
      </DispatchContext.Provider>
    </TodoContext.Provider>
  );
};

//context로부터 함수를 받아서 사용(todos가 바뀌더라도 dispatch는 변함이 없어서 렌더링되지 않음)
const TodoInput = () => {
  const dispatch = useDispatch();

  //생략..
}