Ant Design의 DatePicker 한글화

예전에는 CMS를 자체적으로 구축하려 버튼과, 셀렉트 박스 등을 전부 라이브러리에서 따와서 조립하거나 직접 컴포넌트를 구축했는데 요즘은 CMS 전용 라이브러리도 정말 잘 나와 있다. 이리 저리 둘러보다 UI와 잘 적어둔 공식 문서의 내용에 이끌려 Antd Pro를 선택했다.
Antd Pro를 사용하여 정말 편리하고 빠르게 CMS를 구축했지만 사용하면서 겪었던 문제 중 하나인 한글화 문제에 대해 기록해 두기로 했다 😂

중국에서 개발한 Antd🐜, 중국어가 나온다.

DatePikcer를 불러왔는데, 다음과 같이 달력이 중국어로 출력되었다. (초기화 버튼은 직접 만든 것이다.)

인터넷을 찾아보니, DatePicker를 호출한 컴포넌트를 ConfigProvider 로 감싸 locale 설정을 해 주면 한국어를 지원한다고 한다.

import { ConfigProvider } from 'antd';
import koKR from 'antd/es/locale/ko_KR';

<ConfigProvider locale={koKR}>
	<DatePicker />
</ConfigProvider>

와! 한국어가 적용됐다. 그러나 아직 문제가 완전히 해결되진 않았다.

월 부분이 영어로 출력되고 있다.

Moment.js 에서 Dayjs로

인터넷을 검색해 보니, Antd에서 Moment.js가 지원을 중단하면서 날짜를 다루는 기능을 Day.js를 사용하는 방식으로 변경했다고 한다. 그렇다면, Day.js에 한국어 locale을 주입하면 되지 않을까? 다른 사람들도 그렇게 생각한 듯 하다. 검색을 통해 얻어낸 정보로 시도해 보았다.

import 'dayjs/locale/ko';
import { Dayjs } from 'dayjs';
dayjs.locale('ko');

그러나 문제는 여전히 같았다. 이렇게는 완전하게 주입되지 않는다. 공식 문서를 좀 더 뒤져보자.
🔗 https://ant.design/components/date-picker
format의 기본값이 rc-picker이다..! Ant Design의 DatePicker는 내부적으로 rc-picker를 사용한다.

import generatePicker from 'antd/es/date-picker/generatePicker';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig)
const { RangePicker } = DatePicker;

다음과 같이 import하여 Datepicker에 Dayjs type의 dayjsGenerateConfig를 주입했다. dayjs에 한국어 로케일을 적용했기 때문에, 이제 완전히 한글이 적용된다 😊✌️

최종 코드는 다음과 같다.

import 'dayjs/locale/ko';
import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';

const ListTemplate = () => {
  const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
  const { RangePicker } = DatePicker;
  
  return (
  	<RangePicker />
  )
}

이번에는 RangePicker를 사용했지만, DatePicker를 그대로 사용해도 된다.