[ React ] 캘린더 컴포넌트 직접 만들기 (feat. date-fns)

요구사항 분석

1. 오늘 날짜
2. 이번 달 정보
   1. 시작하는 요일(1일)
   2. 몇 일까지 있는지
   3. 몇 주까지 있는지
3. 이전 달, 다음 달 이동

---

 

기능 구현 고민

Date 객체를 더 쉽게 사용할 수 있게 도와주는 date-fns 라이브러리 함께 활용

• 오늘 날짜 → new Date()
• 시작하는 요일 → startOfMonth + getDay
• 몇 일까지 있는지 → getDaysInMonth
• 몇 주까지 있는지 → getWeeksInMonth
• 다음 달 → addMonths
• 이전 달 → subMonths

 

 

---

구현

1. 기준일 변수 생성

const [baseDate, setBaseDate] = useState(new Date());

달의 시작 요일, 일 수 등을 구하려면 기준일이 필요하다.

 

2. 요일 리스트

캘린더의 날짜 부분은 Grid로 구현할 것이기 떄문에 시작 요일 전까지 빈 값을 넣어줄 리스트가 필요하다.

 Array(firstDayOfMonth).fill(0);

getDaysInMonth로 구한 해당 달의 일 수를 map 함수로 그리드에 그려주려면 배열이 필요하다.

그러나 자바스크립트에는 파이썬의 range와 같은 간편한 함수가 없기 때문에 map 함수를 이용했다.

const newDate = [...Array(daysInMonth)].map((_, i) => {
  return i + 1;
});

 

⬇

<CalendarBody>
  {days.map((day) => (
    <CalendarEachDay>{day}</CalendarEachDay>
  ))}
  {blank.map(() => (
    <CalendarEachDay></CalendarEachDay>
  ))}
  {date.map((day) => (
    <CalendarEachDay>{day}</CalendarEachDay>
  ))}
</CalendarBody>

 

3. 함수화

const getMonthInfo = () => {
    const daysInMonth = getDaysInMonth(baseDate);
    const firstDayOfMonth = getDay(startOfMonth(baseDate)); // 0(일) ~ 6(토)
    const newBlank = Array(firstDayOfMonth).fill(0);
    setBlank(newBlank);
    const newDate = [...Array(daysInMonth)].map((_, i) => {
      return i + 1;
    });
    setDate(newDate);
};

달이 변경될 때마다 초기화해야 하는 시작 요일, 일 수, 요일 리스트를 구하는 함수를 하나로 묶어줬다.

 

4. 이전 달, 다음 달

<CalendarHeader>
  <MdOutlineNavigateBefore onClick={getPrev} />
  <span>{baseDate.getFullYear()}년 </span>
  <span>{baseDate.getMonth() + 1}월</span>
  <MdOutlineNavigateNext onClick={getNext} />
</CalendarHeader>

const getPrev = () => {
  setBaseDate(subMonths(baseDate, 1));
};
const getNext = () => {
  setBaseDate(addMonths(baseDate, 1));
};

subMonths, addMonths를 통해 새로운 기준일(baseDate)를 정해준다.

useEffect(() => {
  getMonthInfo();
}, [baseDate]);

기준일이 변경될 때마다 getMonthInfo 함수를 실행하여 달력 정보를 바꿔주도록 했다.

 

 

---

 

결과