React + dayjs()로 캘린더 만들기 | 오늘날짜 표시 , 요일 색깔변경

처음엔 단순하게 1일부터 마지막날짜까지
for문을 돌려 배열에 넣어줬었다.
근데 오늘날짜 표시를 하기 위해선
단순하게 증가한 i가 아니라 object타입으로 받아 today를 비교하게 해야했음..
dayjs()에 isToday()가 있으므로ㅎㅎ

  //해당월 날짜 배열
    for (let i = 1; i <= endDayOfCurrent; i++) {
      currentDayRow.push(i);
    }

그래서 걍..

 //해당월 날짜 배열
    for (let i = 0; i < endDayOfCurrent; i++) {
      currentDayRow.push(formattedCurrentDay.add(i, "day"));
    }

for문을 그대로 돌려서 dayjs()에서 제공하는 add(i,"day")기능을 사용해서 배열에 넣어줘버렸다..ㅎㅎ;;
마지막 날짜까지 for문을 돌면서 하루씩 day를 증가시켜준다.

    const currentComponent = currentDayRow.map((item, index) => (
      <Day key={index}>
        {item.isToday() ? (
          <Today>{item.format(dayFormat)}</Today>
        ) : (
          item.format(dayFormat)
        )}
      </Day>

그리고 배열을 map으로 돌려서 item.isToday() 삼항연산자를 사용해 오늘일 경우 Today컴포넌트를 렌더링 하게 해줬다

평일과 주말 컬러 구분도 해줬다.
for문을 돌려 date배열에 요일들을 넣어준다.
그리고 date배열을 map으로 돌려 index별로 구분해 return해준다...

  const getWeek = () => {
    const dayFormat = "ddd";
    const date = [];
    const dateComponent = [];
    //dayjs()의 .day()는 요일을 리턴해준다
    for (let i = 0; i < 7; i++) {
      date.push(currentMonth.day(i).format(dayFormat));
    }
    date.map((item, index) => {
      if (index === 0) {
        dateComponent.push(
          <Week key={index} className="sun">
            {item}
          </Week>
        );
      } else if (index === 6) {
        dateComponent.push(
          <Week key={index} className="sat">
            {item}
          </Week>
        );
      } else {
        dateComponent.push(<Week key={index}>{item}</Week>);
      }
    });
    return <WeekRow>{dateComponent}</WeekRow>;
  };

이게 최선의 방법은 아니겠지만 우선 이렇게 해봤당

좋은 방법 있으면 알려주세욤

설명충(설명에충실하다) 조와합니당~~ 정말루~~❤️