React + day.js로 달력만들기 :)

달력을 만들어 보자  :) 

 

~ dayjs 공식홈페이지 ~

https://day.js.org/en/

---

달력을 구현하기 위한 로직을 정리하자 ~ :)

---

1. 이번달의 시작 요일을 알아야 한다.

   1-1 . dayjs 에서 startOf는 지정 시간 단위의 시작을 알려준다.

    1-2 . dayjs().startOf("month")는 object를 리턴한다.

    1-3. dayjs().startOf("month").format("d") 를 이용해 필요한 포맷으로 리턴받으면 된다.

    1-4. format("d")는 요일이 0-6까지로 표현된다. (일요일이 0으로 시작함)

2. 이번달의 마지막 날짜

    2-1.마찬가지로 이번달의 마지막은 dayjs().endOf("month")를 사용해 Object를 리턴받는다.

    2-2 .dayjs().endOf("month").format("D")를 이용해 필요한 포맷으로 리턴받는다.

    2-3. format("D")는 날짜를 리턴한다 (해당 월의 1-31까지의 날짜)

3. 그 후 해당하는 달이 시작하는 요일 (1번에서 받음)에서부터 1일이 시작되면 된다.

4. 그리고 해당월의 마지막날짜 (2번에서 받음)를 입력해 증가시켜 출력해주면된다.

 

이렇게 현재 달의 날짜를 받아 올수 있다.

 const getDays = () => {
    // monthStart : 현재 달의 시작요일 (0:일요일 )
    // monthEnd : 현재달의 마지막일

    const monthStart = current.startOf("month").format("d");
    const monthEnd = current.endOf("month").format("D");

    let days = Array.from(
      new Array(Number(monthEnd)),
      (item, index) => index + 1
    );

    return (
      <Date>
        {days.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </Date>
    );
  };

---

이제 우리는 이 days를 month안에서 렌더링 시켜주면 되는데

이때 여기서 필요한것은 ! 

5. 몇번째 주에서 해당 월이 시작하는지

6. 몇번째 주에서 해당 월이 끝나는지

를 알아내야한답

 

 

---

내일 계속 써야지~~~ 키득키득

하다보니까 day만 비교해서 모든 달의 현재일자가 같은 오류가 생겨버렸기 때문에^^ㅋ

쉬워보였는데 하다보니까 생각할게 많네

내일 커피마시고 해야지!