커스텀 날짜 라이브러리 사용하기

커스텀 날짜 라이브러리 사용하기 (Use custom date library)

기본적으로 Ant Design은 시간과 날짜를 처리할 때 Day.js를 사용해요. Day.js는 Moment.js와 같은 API를 제공하는 불변(immutable) 날짜-시간 라이브러리예요.

출처: 문서

본문

기본적으로 Ant Design은 시간과 날짜를 처리할 때 Day.js를 사용해요. Day.js는 Moment.js와 같은 API를 제공하는, Moment.js의 대안인 불변(immutable) 날짜-시간 라이브러리예요.

다른 날짜 라이브러리를 사용하고 싶을 수도 있어요 (Ant Design은 현재 moment, date-fns, luxon을 지원해요). 커스터마이징 방법은 두 가지를 제공해요:

커스텀 컴포넌트

첫 번째 방법은 generatePicker(또는 generateCalendar)로 Picker 컴포넌트를 만드는 거예요.

먼저 antd 데모를 초기화해요. 스캐폴딩 가이드를 참고하거나, 여기서 바로 antd 초기화를 시작할 수 있어요.

DatePicker.tsx

src/components/DatePicker.tsx를 만듭니다.

예를 들어:

import momentGenerateConfig from '@rc-component/picker/generate/moment';
import { DatePicker } from 'antd';
import type { Moment } from 'moment';

const MyDatePicker = DatePicker.generatePicker<Moment>(momentGenerateConfig);

export default MyDatePicker;

TimePicker.tsx

src/components/TimePicker.tsx를 만듭니다.

예를 들어:

import * as React from 'react';
import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
import type { Moment } from 'moment';

import DatePicker from './DatePicker';

export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {}

const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => (
  <DatePicker {...props} picker="time" mode={undefined} ref={ref} />
));

TimePicker.displayName = 'TimePicker';

export default TimePicker;

Calendar.tsx

src/components/Calendar.tsx를 만듭니다.

예를 들어:

import momentGenerateConfig from '@rc-component/picker/generate/moment';
import { Calendar } from 'antd';
import type { Moment } from 'moment';

const MyCalendar = Calendar.generateCalendar<Moment>(momentGenerateConfig);

export default MyCalendar;

커스텀 컴포넌트 내보내기

src/components/index.tsx를 만듭니다.

예를 들어:

export { default as Calendar } from './Calendar';
export { default as DatePicker } from './DatePicker';
export { default as TimePicker } from './TimePicker';

커스텀 컴포넌트 사용하기

src/App.tsx를 수정해서 moment와 커스텀 컴포넌트를 임포트해요.

- import { DatePicker, Calendar } from 'antd';
- import format from 'dayjs';

+ import { DatePicker, TimePicker, Calendar } from './components';
+ import format from 'moment';

antd-moment-webpack-plugin

우리는 또 다른 구현도 제공해요. @ant-design/moment-webpack-plugin을 사용하면 기존 코드를 한 줄도 바꾸지 않고 Day.js를 moment로 바로 교체할 수 있어요. 더 자세한 내용은 @ant-design/moment-webpack-plugin에서 확인할 수 있어요.

// webpack-config.js
const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');

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

date-fns 사용하기

date-fns는 현재 dayjs와 비슷한 커스텀 컴포넌트 방식을 지원해요. 차이점은 사용하는 매개변수 타입이 다르다는 점이에요. antd 4.5.0 이상에서 지원됩니다.

예를 들어:

DatePicker.tsx

src/components/DatePicker.tsx를 만듭니다.

코드는 다음과 같아요:

import dateFnsGenerateConfig from '@rc-component/picker/generate/dateFns';
import { DatePicker } from 'antd';

const MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig);

export default MyDatePicker;

luxon 사용하기

antd 5.4.0부터 luxon을 dayjs 대신 사용할 수 있고 같은 기능을 지원해요. 다만 동작에 몇 가지 차이가 생기는데, 아래에서 설명할게요.

구현

src/components/DatePicker.tsx 파일을 만들고 luxon 기반 picker를 다음과 같이 구현해요:

import luxonGenerateConfig from '@rc-component/picker/generate/luxon';
import { DatePicker } from 'antd';
import type { DateTime } from 'luxon';

const MyDatePicker = DatePicker.generatePicker<DateTime>(luxonGenerateConfig);

export default MyDatePicker;

dayjs와의 주요 차이점

luxon 사용자라면 luxon에 로컬라이제이션(localization)용 커스텀 구현이 함께 제공되지 않는다는 걸 알고 있을 거예요. 대신 브라우저 네이티브 Intl API에 의존해요.

이 때문에 다른 날짜 라이브러리와 서식이 다소 달라져요. 현재 주요 차이는 다음과 같아요:

한 주의 첫 번째 요일이 로케일과 무관하게 항상 월요일이에요.
연도의 주(week of year) 번호가 때때로 달라요 (determining할 때 ISO 주 규칙을 사용해요).
커스텀 로케일에서 짧은 요일 형식이 때때로 달라요 (2자 대신 3자가 될 수 있어요).
선택한 주 레이블 형식이 약간 달라요 (예: "2021-1st" 대신 "2021-01").

luxon 구성을 조정하면 이런 기본 luxon 동작을 커스터마이징할 수 있어요:

import luxonGenerateConfig from '@rc-component/picker/generate/luxon';
import { DatePicker } from 'antd';
import type { DateTime } from 'luxon';

const customLuxonConfig = {
  ...luxonGenerateConfig,
  getWeekFirstDay(locale) {
    // Your custom implementation goes here
  },
};

const MyDatePicker = DatePicker.generatePicker<DateTime>(customLuxonConfig);

export default MyDatePicker;

이런 커스터마이징을 하면 결과 DatePicker의 동작이 예상치 못한 방식으로 바뀔 수 있으니, 엣지 케이스를 반드시 테스트해 보세요.

커스텀 날짜 라이브러리 사용하기