[project] 달력 라이브러리 없이 내맘대로 달력을 만들어보자 (1)

💡 자유롭게 달력 디자인을 만들고 싶어서 달력 라이브러리를 사용하지 않고, 직접 달력 구현에 도전해보았다!

사용 라이브러리

날짜변경, 날짜 간격을 쉽게 구현 할 수 있는 date-fns 날짜 다이어리를 사용했다.
설치는 간편하다.

npm install date-fns

https://date-fns.org/docs/Getting-Started
위의 사이트에 가면 date-fns의 각종 함수들이 있다. 필요한 함수들을 참고하여 사용하면 된다.

📌 구현해야 할 것은 사이트를 방문했을 때의 날짜, 그 날짜를 기준으로 앞으로 뒤로 버튼을 누를때 달 단위로 날짜가 변화하는 기능이다.

Month 구하기

먼저 현재 날짜를 구한다. 현재 날짜를 curDate라는 useState에 상태를 저장하고 달을 up,down을 할때마다 현재 날짜를 바뀌게 하여 상태변화를 일으킬 것이다.
그 다음 date-fns의 함수인 addMonths,subMonths를 이용하여 뒤로 버튼을 누르면 subMonths가 실행되고, 앞으로 버튼을 누르면 addMonths가 실행 되도록 구현했다.
💡 addMonths나 subMonths의 대상이 curDate 현재 날짜이기 때문에 달의 변화에 따라 년도도 변한다.

// Month.tsx
import {addMonths,subMonths} from 'date-fns'
...
...
 const UpClick = () => {
        props.setCurDate(addMonths(props.curDate, 1));
    };
    const DownClick = () => {
        props.setCurDate(subMonths(props.curDate, 1));
    };

//curDate / Calender.tsx
let [curDate,setCurDate] = useState(new Date());
const curMonth = forMat(curDate,'MMMM');

year 구하기

현재 month에서 앞으로 뒤로 이동하기 버튼을 눌러 12월이 지나거나 1월이전으로 이동하면 자동으로 year가 변한다.

const curYear = forMat(curDate,'yyyy');

결과

아래의 결과는 뒤로 이동하는 버튼을눌렀을때 해달 달이 변한 것을 보여준다. 12월이 지나면 년도가 바뀌고 1월로 넘어간다.

😅 처음에 달력구현을 달이 변하는 useState와 년도가 변하는 useState를 따로 만들어서 구현을 했는데 그렇게 되면 month에 따라 year가 변화하는 것을 다 구현해야했다. 내가 의도한 달력은 달의 변화로만 달력을 넘기기 때문에 new Date()를 통해 현재 날짜를 구하고 달만 이동하도록 하여 필요한 year,month,day만 가져오면 된다.