[React] Date를 활용하여 오늘/내일/지난 날짜 변환 해보기

기한을 설정하는 페이지에서 지정한 날짜에 따라

오늘, 내일, 혹은 지난 날짜임을 알려주는 경우들을 본 적이 있는데

그 기능을 작업해 보려고 한다.

 

이번에 todo작업하면서 date관련된 부분을 자주 접하면서

익히게 되었는데 date값들로 계산을 해보면서 몇가지 알고 있으면 좋을 점을 적어보겠다.

 

new Date에서 직접 날짜를 입력해서 새로운 Date를 생성할 때 month부분에 실제 입력할 월에 -1 을 해주어야

원하는 월을 얻을 수 있다. ( ex) 1월일 경우 0)

 

const someDay = new Date(2022, 1, 18);
console.log(someDay); // Fri Feb 18 2022 00:00:00 GMT+0900 (한국 표준시)

const someDay2 = new Date(2022, 0, 18);
console.log(someDay2); // Tue Jan 18 2022 00:00:00 GMT+0900 (한국 표준시)

getMonth()로 구한 값을 넣을 경우에는 그냥 넣어도 된다.

이 부분이 초반에 조금 헷갈렸다.

 

같은 date값을 반환하는 값이라도 Date는 객체기 때문에

비교연산 == or == 시에 false가 나타난다.

  const date = new Date(2022, 0, 18);
  const today = new Date(2022, 0, 18);

  console.log(today); // Tue Jan 18 2022 00:00:00 GMT+0900 (한국 표준시)
  console.log(date); // Tue Jan 18 2022 00:00:00 GMT+0900 (한국 표준시)
  console.log(today == date); // false

 

비교를 하려면 문자열로 변환을 해주거나 time값으로 비교를 해 준다.

  console.log(today.toString() === date.toString()); // true

  const tTime = today.getTime();
  const thisTime = date.getTime();

  console.log(tTime); // 1644591600000
  console.log(thisTime); // 1644591600000
  console.log(tTime == thisTime); // ture

 

new Date로 얻은 date값은 같은 값인지 비교는 안되지만 다른 값 비교는 가능하다.

const someDay = new Date(2022, 1, 11);
const today = new Date(2022, 1, 12);

console.log(today > date); // true

 

setDate사용 시 기존 Date 객체의 데이터가 수정된다.

const today = new Date();
console.log(today); // Wed Jan 12 2022 04:19:53 GMT+0900 (한국 표준시)

const _today = new Date();
const _tomorrow = new Date(_today.setDate(_today.getDate() + 1));

console.log(_today); // Thu Jan 13 2022 04:17:51 GMT+0900 (한국 표준시)
console.log(_tomorrow); // Thu Jan 13 2022 04:17:51 GMT+0900 (한국 표준시)

 

 

위에 몇가지 테스트를 해본 것을 토대로 Date를 변환해주는 함수를 만들어보았다.

 

const dateConverder = (date) => {
  let today = new Date();
  const tYear = today.getFullYear();
  const tMonth = today.getMonth();
  const tDate = today.getDate();
  const thisYear = date.getFullYear();
  const thisMonth = date.getMonth();
  const thisDate = date.getDate();

  // 시,분,초 초기화
  date = new Date(thisYear, thisMonth, thisDate); 
  today = new Date(tYear, tMonth, tDate);
  const tomorrow = new Date(tYear, tMonth, tDate + 1);

  if (today.toString() === date.toString()) {
    return "오늘";
  }
  if (tomorrow.toString() === date.toString()) {
    return "내일";
  }

  let isOverdue = today > date ? "기한 초과, " : "";

  return `${isOverdue}${tYear !== thisYear ? thisYear + "년" : ""}${
    thisMonth + 1
  }월 ${thisDate}일`;
};

 

today에서 Date를 만들어 주고

today와 전달 받은 data의 년, 월, 일만 비교하기 위하여 시, 분, 초 부분을 초기화 해주었다.

date값을 어떤 값으로 받느냐에 따라 코드가 바뀔 수도 있겠지만

today와 date의 년,월,일이 같다면 "오늘"을 리턴

tomorrow와 date의 년,월,일이 같다면 "내일"을 리턴

today에 해당하는 년도와 전달받은 date의 년도가 같다면 년도 생략

기한이 초과되었다면 "기한 초과" 라는 문자열을 추가하게 만들어 보았다.

 

단순 데이터를 변환하기 위해 만들었지만 반환된 데이터에 맞게 Css도 변경해야했다.

데이터와 Css변경을 한 곳에서 처리하고 싶어서 컴포넌트를 만들었다.

 

const DueDateText = ({ dueDate }) => {
  let today = new Date();
  const tYear = today.getFullYear();
  const tMonth = today.getMonth();
  const tDate = today.getDate();
  const thisYear = dueDate.getFullYear();
  const thisMonth = dueDate.getMonth();
  const thisDate = dueDate.getDate();
  const week = ["일", "월", "화", "수", "목", "금", "토"];
  const thisDay = week[dueDate.getDay()];

  // 시,분,초 초기화
  const date = new Date(thisYear, thisMonth, thisDate);
  today = new Date(tYear, tMonth, tDate);
  const tomorrow = new Date(tYear, tMonth, tDate + 1);

  let isOverdue = today > date ? "기한 초과, " : "";

  if (today.toString() === date.toString()) {
    return <span className="due-date today">오늘</span>;
  }
  if (tomorrow.toString() === date.toString()) {
    return <span className="due-date">내일</span>;
  }

  return (
    <>
      <span className={`${today > date ? "over-due" : ""} due-date`}>
        {`${isOverdue}${tYear !== thisYear ? thisYear + "년 " : ""}${
          thisMonth + 1
        }월 ${thisDate}일 (${thisDay})`}
      </span>
    </>
  );
};

export default DueDateText;

 

각 데이터에 맞게 CSS를 적용해보았다.