[웹 프로젝트] 리액트 datepicker 직접 구현하기

🎈 직접 구현하는 이유?

리액트에서는 보통 react-datepicker라는 기존에 잘 만들어진 라이브러리를 많이 사용한다.

하지만 내가 원하는 기능, 원하는 디자인 대로만 수정하는 것은 다소 번거롭다.

때문에 나는 언제든 원하는 기능과 디자인으로 수정을 용이하게 할 수 있도록 datepicker를 직접 구현해 보았다.

 

📢 구현 중 사용되는 것

1. 먼저 moment라는 라이브러리에 대해 알아두어야 한다.
이 라이브러리는 달력에 표시되는 요일 등을 대신 계산해준다.
이 계산 또한 직접하려면 해당 알고리즘을 이용해서 구할 수 있으나 여기서는 moment를 이용하였다.

2. 선택된 날짜나 현재 달력에 표시되는 연도 등을 useState라는 리액트 훅을 이용하여 관리한다.
( * 변경 시 render되도록 )

3. 클릭 이벤트로 target.classList를 이용하여 UI를 수정한다.

 

📢 구현 과정 ( 핵심적인 로직만 )

  // 현재 해당하는 년도 및 달
  const [curYear, setCurYear] = useState(moment().year());
  const [curMonth, setCurMonth] = useState(moment().month());
  
  // 해당하는 달의 day 수
  const allDaysOfMonth = moment([curYear, 0, 31]).month(curMonth).format("DD");

  // 해당 달 첫 1일의 요일
  const firstDayOfCurMonth = moment([curYear, curMonth, 1]).day();

  // 해당 달 마지막 요일
  const lastDayOfCurMonth = moment([curYear, curMonth, allDaysOfMonth]).day();

  // 지난 달 마지막 날짜
  const lastDateOfLastMonth = moment([curYear, 0, 31])
    .month(curMonth - 1)
    .format("DD");

  // 지난 달에 보여져야하는 day들
  const preCalendarDays = [];

  // 해당 달
  const curCalendarDays = [];

  // 다음 달
  const nextCalendarDays = [];

  // 보여져야하는 지난 달 수
  if (firstDayOfCurMonth > 0) {
    for (let i = 0; i < firstDayOfCurMonth; i++) {
      preCalendarDays.push(lastDateOfLastMonth - firstDayOfCurMonth + i + 1);
    }
  }

  // 보여져야하는 해당 달 수
  for (let i = 1; i <= allDaysOfMonth; i++) {
    curCalendarDays.push(
      `${curYear}-${String(curMonth + 1).padStart(2, 0)}-${i}`
    );
  }

  // 보여져야하는 다음 달 수
  for (let i = 1; i < 7 - lastDayOfCurMonth; i++) {
    nextCalendarDays.push(`${i}`);
  }

주석처럼 moment를 이용해 각각의 값을 받아올 수 있다.

해당 변수들을 pre, cur, next 배열을 통해 날짜를 담는 이유는 해당 달을 보더라도

이전 달의 마지막 날짜와 다음 달의 처음 날짜를 표시해주는게 사용자 측면에서 더 직관성있고,

이를 렌더시킬 때, 구분지어 UI를 표시할 수 있기 때문이다.
( 다 따로 태그를 달아 만드는 것이 아니라는 것을 알아야 한다. )

그럼 위와 같이 27, 28 따로 1~31 따로 1~2 따로 렌더링하여 직관적으로 보이게 한다.

화면에 보여지는 핵심 틀은 만들었으니, 이제 다른 년도와 달을 보더라도 바뀌도록 설정해야한다.

먼저 두 가지 정도를 고려해 보았다.

1. 달력의 왼쪽, 오른쪽 표시를 클릭해서 이동하도록

2. 이전 달 또는 다음 달의 일자를 클릭하면 이동되도록


1번의 경우에는 매우 간단하다. 왼쪽으로 갈 시에는 예를들어 2022년 1월에서 2021년 12월로 넘어가는 상황만
잘 계산해주면 된다. 오른쪽도 마찬가지다.

// 이전 달 이동
  const checkPreCalendar = () => {
    if (curMonth === 0) {
      setCurYear(curYear - 1);
      setCurMonth((curMonth = 11));
      return;
    }
    setCurMonth(curMonth - 1);
  };

  // 다음 달 이동
  const checkNextCalendar = () => {
    if (curMonth === 11) {
      setCurYear(curYear + 1);
      setCurMonth((curMonth = 0));
      return;
    }
    setCurMonth(curMonth + 1);
  };

기본 메커니즘은 useState를 이용하는 달을 - 또는 + 해주고 위에 언급한 예외상황만 고려해주었다.
이후 버튼을 만들어 각각의 event를 추가해주면 된다.


2번의 경우에는 이전 달을 클릭한 것인지, 다음 달을 클릭한 것인지, 아니면 해당하는 달을 클릭하는 것인지 분별이 필요하다.

나 같은 경우에는 렌더 시 className을 

// pre
className={`special-days-in-grid left`}

// current
className={`days-in-grid ${curYear}-${curMonth + 1}-${index + 1}`}

// next
className={`special-days-in-grid right`}

을 통하여 차별을 주었고, 클릭시 e.target.classList의 값을 통해 트리거를 구분지었다.

그 이후는 1번의 경우와 똑같다고 볼 수 있다.



마지막으로 제일 중요한 것은 요일을 선택할 때의 처리였다.

요일을 선택하는 것은 이전 달의 요일을 클릭하여도 이전 달로 넘어가서 해당하는 요일이 선택되어 있어야 한다.

이 핵심은 위의 current에 렌더 시 해당하는 요일을 className에 넣어두고,

  // 선택된 날
  const [curSelectedDate, setCurSelectedDate] = useState();

위와 같이 선택된 날을 useState를 통해 저장해서, 렌더 시 선택된 날일때만 clicked 라는 className을 주어 표시한다.

그렇게 하면 아래와 같이 완성할 수 있다.

추가 기능이 생긴다면 언제든 편하게 구현해서 넣으면 끝!

시연 영상