🚨 Troubleshooting

ant design의 DatePicker를 사용하던 중 locale을 props로 전달해도 이미지처럼 한글과 영어가 반반 섞인 형태로 나오는 증상이 있었습니다. 여러가지 시도 끝에 해결한 방법을 정리해보겠습니다.

ConfigProvider

먼저 ConfigProvider 컴포넌트를 이용하는 방법이 있습니다. <ConfigProvider> 컴포넌트로 전체 App을 감싸거나, 또는 GlobalStyle을 구현하는 곳에서 선언해 locale을주입하는 방법입니다.

import { ConfigProvider } from "antd";
import ko_KR from "antd/locale/ko_KR";
<ConfigProvider locale={ko_KR}>
  <App />
</ConfigProvider>;

하지만 전 이 방법으로 해결되지 않았습니다. 위 사진처럼 일부만 변경된 상태였습니다.

DatePicker

ConfigProvider로 locale을 맞게 준다고 생각했지만 제대로 언어 설정이 바뀌지 않았으니, 이번엔 직접 DatePicker 컴포넌트에 locale을 주입해보기로 했습니다.

import locale from "antd/es/date-picker/locale/ko_KR";
<DatePicker
  locale={locale}
  placeholder="날짜를 선택해주세요."
  format="YYYY-MM-DD"
  onChange={onChange}
  onOk={onOk}
/>;

직접 DatePicker에 antd의 locale을 전달해도 이미지처럼 한글과 영어가 반반 섞인 형태로 나왔습니다.🥲

dayjs

import dayjs from "dayjs";
import "dayjs/locale/ko";
dayjs.locale("ko");

dayjs를 통해 locale을 전달하면 드디어 locale이 잘 작동합니다. 저의 경우 마지막방법으로 해결하였지만 앞의 2가지 방법으로도 해결되는 경우가 있으니 하나씩 적용해보시면 좋겠습니다.