[React] antd DatePicker 날짜 선택 오류

문제 상황

출처(참고자료: stackoverflow)

Antd의 DatePicker를 활용하는 도중, DatePicker에 hover시 기이한 현상을 식별하였다.

(프로젝트 관련 코드가 유출이 불가해서 같은 상황의 사진을 가져와봤다)

원인

Antd v5를 사용중이었고, 공식문서에 따르면 

v4 에서 v5로 upgrade 시에 DatePicker에서 사용하던 날짜 형식에 필요한 라이브러리를

moment에서 day.js로 대체함으로 인해 형식이 맞지 않아 발생한 오류라고 할 수 있다.

 

해결방안

// Not To Do 😒

import moment, { Moment } from 'moment';

moment().subtract(7, 'days');
moment().startOf('day');

const handleDateChange = (setter: (date: Moment | null) => void) => (date: Moment | null) => {
 setter(date);
 // 기타 로직
}


// To Do 😊

import dayjs, { Dayjs } from 'dayjs';

dayjs().subtract(7, 'days');
dayjs().startOf('day');

const handleDateChange = (setter: (date: Dayjs | null) => void) => (date: Dayjs | null) => {
 setter(date);
 // 기타 로직
}

 

다른 방법으로 dayjs 대신 기존 moment를 사용하고 싶다면, 아래와 같이 필요 패키지를 설치하고 설정을 추가하면 사용할 수 있다.

npm install --save-dev @ant-design/moment-webpack-plugin

// webpack-config.js
import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';

module.exports = {
  // ...
  plugins: [new AntdMomentWebpackPlugin()],
};

 

참고자료

https://ant.design/docs/react/migration-v5#technology-adjustment

V4 to V5 - Ant Design

 

스택오버플로우