내가 생각한 방법은...
해당 월의 시작요일을 찾고
해당 월의 마지막 날짜를 찾아서
배열에 push를 해주는것 이었다!
0부터 시작요일까지는 "" 빈값을 넣어주고
시작부터 마지막까지는 for문을 돌려 날짜를 넣어준다
그리고 마지막날짜부터 달력의 마지막 칸까지 또 ""빈값을 넣어주는
그런 방법이였다
const getDays = () => {
const startDate = currentMonth.startOf("month").format("d");
const endDate = currentMonth.endOf("month").format("D");
const endDateIndex = currentMonth.endOf("month").format("d");
const dateRow = [];
for (let i = 0; i < startDate; i++) {
dateRow.push("");
}
for (let i = 1; i <= endDate; i++) {
dateRow.push(i);
}
for (let i = endDateIndex; i < 6; i++) {
dateRow.push("");
}
setArrayOfDays(dateRow);
};
useEffect(() => {
getDays();
}, [currentMonth]);
이렇게 모든 날들을 받아준 후에 map으로 돌려준다
const renderDays = () => {
arrayOfDays.map((item, index) => {
item === ""
? allDayRow.push(<EmptyDay key={index}></EmptyDay>)
: allDayRow.push(
<Day key={index}>
{item}
</Day>
);
});
return <Date>{allDayRow}</Date>;
};
그럼 이렇게 렌더링 된다 .. !
생략된 부분도 많지만 로직은 이렇게 했다
과연 괜찮은 방법일까?
오 지 랖 + 간 섭 + 알 려 주 기 대 환 영 ❤️
기다릴게 개발고수들..
이제 달력에서 오늘날짜를 표기해주는 방법을 찾아야하는데
dayjs()의 isToday()플러그인을 쓰면 되지 않을까 한다ㅎㅅㅎ;;;
근데 map으로 돌려주는 날짜는 단순한 number들이여서 isToday()랑 비교가 가능하려나..?
이제 해야지..^^ㅋ
'Frontend > React' 카테고리의 다른 글
React + dayjs()로 캘린더 만들기 | 오늘날짜 표시 , 요일 색깔변경 (2) | 2023.01.24 |
---|---|
React + dayjs()로 달력만들기 3탄.. 2탄과 거의 비슷함 (0) | 2023.01.23 |
React + day.js로 달력만들기 :) (0) | 2023.01.21 |
forwardRef 사용법 (0) | 2022.05.26 |
forwardRef 를 알아보자 (0) | 2022.05.24 |