ToDo캘린더 클론코딩 - Custom Hook으로 정리

<개요>

우리는 캘린더 구현 뿐만 아니라 ToDo List 구현도 해야하기 때문에, 양쪽 상태변수들이 섞여 적히면 가독성이 현저히 떨어지게 되고 유지보수에 큰 어려움을 겪을 수 있다. 

 

따라서 지금까지 만들었던 캘린더의 상태변수 및 필요한 함수들은 따로 useCalendar라는 Custom 훅에 넣어서 정리한다. 

App.js 에서 필요한 값들은 useCalendar의 return 값에서 받아온다. 

그리고 이제부터 만들 useTodoList는 처음부터 따로 커스텀 훅 파일을 만들고 거기에 필요한 상태변수들과 함수들을 적겠다. 

 

1. use-Calendar.js

import dayjs from "dayjs";
import { useState } from "react";

export const useCalendar = (now) => {
  const[selectedDate, setSelectedDate] = useState(now);
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);


  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => { 
    setSelectedDate(dayjs(date)); 
    hideDatePicker();
  };

  const subtract1Month = () => {
    const newSelectedDate = dayjs(selectedDate).subtract(1,"month");
    setSelectedDate(newSelectedDate);
  }

  const add1Month = () => {
    const newSelectedDate = dayjs(selectedDate).add(1,"month");
    setSelectedDate(newSelectedDate);
  }

  return {
    selectedDate,
    setSelectedDate,
    isDatePickerVisible,
    showDatePicker,
    hideDatePicker,
    handleConfirm,
    subtract1Month,
    add1Month
  }
}

 

selectedDate 계산 위해 now(현재시각) 넣어줌.

2. use- todo-list 안