[TIL] moment를 사용해 날짜 계산하기

3879 단어 momentReactTILReact

cms 어드민 페이지 작업 중 플리니스트 환전 금액을 무조건 다음주 (금)에 준다는 안내 페이지 기획이 있었다.

처음에는 생 javascript로 계산하게 되었다.

예상 입금일 날자 계산
  let nowtoday = new today("2022-6-29");
  let nowYear = nowtoday.getFullYear();
  let nowMonth = nowtoday.getMonth() + 1;
  let week = ["일", "월", "화", "수", "목", "금", "토"];
  let TODAY = week[nowtoday.getDay()];
  let expectedGettoday = nowtoday.gettoday();

  switch (TODAY) {
    case "월":
      expectedGettoday = expectedGettoday + 11;
      break;
    case "화":
      expectedGettoday = expectedGettoday + 10;
      break;
    case "수":
      expectedGettoday = expectedGettoday + 9;
      break;
    case "목":
      expectedGettoday = expectedGettoday + 8;
      break;
    case "금":
      expectedGettoday = expectedGettoday + 7;
      break;
    case "토":
      expectedGettoday = expectedGettoday + 6;
      break;
    case "일":
      expectedGettoday = expectedGettoday + 5;
      break;
  }

  const [month, setMonth] = useState(nowMonth);
  const [today, settoday] = useState(expectedGettoday);

  console.log("origin", month, today);

  //실제 지급일 관련 로직(윤년, 평년)
  function isLeapYear(year) {
    return new today(year, 1, 29).gettoday() === 29;
  }

  let ISLEAPYEAR = isLeapYear(nowYear);

  if (!ISLEAPYEAR) {
    if ((month === 1 || 3 || 5 || 7 || 8 || 10) && today >= 31 === true) {
      settoday(today - 31);
      setMonth(month + 1);
    } else if (month === 2 && today >= 28 === true) {
      settoday(today - 28);
      setMonth(month + 1);
    } else if ((month === 4 || 6 || 9 || 11) && today >= 30 === true) {
      settoday(today - 30);
      setMonth(month + 1);
    } else if (month === 12) {
      settoday(today);
      setMonth(month - 12);
    }
  } else {
    if ((month === 1 || 3 || 5 || 7 || 8 || 10) && today >= 31 === true) {
      settoday(today - 31);
      setMonth(month + 1);
    } else if (month === 12) {
      settoday(today);
      setMonth(month - 12);
    } else if (month === 2 && today >= 29 === true) {
      settoday(today - 29);
      setMonth(month + 1);
    } else if ((month === 4 || 6 || 9 || 11) && today >= 30 === true) {
      settoday(today - 30);
      setMonth(month + 1);
    }
  }

하지만 왜인지... 연산이 잘못되는 부분이 있었고 12월일 때 13이 되는데 해당 부분 예외처리가 안되는 오류가 생겼다.

렌더가 2번 이상 되고 그 상태에서 state값을 업데이트 할 때에 값을 2번 업데이트 하는 오류도 생겨버렷다..

그래서 찾게된 moment 라이브러리!
(자세한 내용은 공식문서를 참고하세요)

  //moment로 날짜 구하기
  let today = moment();
  let month = today.month() + 1;
  let day = today.day();

  let week = ["일", "월", "화", "수", "목", "금", "토"];
  let TODAY = week[day];

  if (month === 1 || 3 || 5 || 7 || 8 || 10 || 12) {
    switch (TODAY) {
      case "월":
        today = moment(today).add(11, "days");
        break;
      case "화":
        today = moment(today).add(10, "days");
        break;
      case "수":
        today = moment(today).add(9, "days");
        break;
      case "목":
        today = moment(today).add(8, "days");
        break;
      case "금":
        today = moment(today).add(7, "days");
        break;
      case "토":
        today = moment(today).add(6, "days");
        break;
      case "일":
        today = moment(today).add(5, "days");
        break;
    }
    .
    .
    .
  const REFUNDDATE = today.date();
  const REFUNDMONTH = today.month() + 1;
  const REFUNDDAY = week[today.day()];

최상단에 moment.locale("kr")로 지정해주어 한국표준시간으로 변경한다.

week문에 요일을 넣어주어서 switch 문으로 월,화,수,목,금,토,일일 경우에 날을 더해주었다.

moment().add(7, 'days'); 해당 문법을 쓰면 moment에서 자동으로 int 만큼 더해준다.

moment를 사용하면, 윤년이나 12월같은 경우에서 예외처리가 적어지기 때문에 훨씬 로직이 간편해진다!

moment를 사용하면 페이지단이 무거워지는 단점이 있지만, 사용하는데 효율성을 생각하면 괜찮은 듯 하다.

좋은 웹페이지 즐겨찾기