[JS] Date 계산

Bullet Journal 프로젝트를 확장하면서 날짜 데이터가 필요하여 JS에서 기본 제공하는 Date object를 사용했다.
날짜 overflow를 알아서 제공해서 날짜를 변경할 때 굳이 연산을 해줄 필요가 없다.

현재 날짜는 recoil을 사용하여 전역 state로 관리해주고 있다. 기본 값은 오늘이다.

const today = new Date();
export const dateState = atom<Date>({
  key: "date",
  default: today,
});

날짜를 하루 전으로 이동하는 버튼의 로직은 다음과 같다. 세세한 스타일링은 추후 변경할 예정이다.

import { useSetRecoilState } from "recoil";
import { dateState } from "../atoms";

function DateBeforeButton() {
  const setDate = useSetRecoilState(dateState);
  const decreaseDate = () => {
    setDate((prevDate) => {
      return new Date(
        prevDate.getFullYear(),
        prevDate.getMonth(),
        prevDate.getDate() - 1
      );
    });
  };
  return (
    <button onClick={decreaseDate} className="mr-4 text-xl">
      {"<"}
    </button>
  );
}

export default DateBeforeButton;

위 코드 중 이 파트가 바로 overflow를 알아서 처리해주는 부분이다. 그냥 단순히 setDate를 사용해서 getDate() + 1 해주면 연도나 월이 수정되지 않는다.

new Date(
        prevDate.getFullYear(),
        prevDate.getMonth(),
        prevDate.getDate() - 1
      )