[React] Antd DatePicker 한글 패치 하는 방법

📱테스트 환경

"react": "18.3.0",
"react-dom": "18.3.0"

---

Antd DatePicker 를 사용하면 영어로 나온다.

이를 위해서 locale 을 한글로 바꿔주는 작업을 해야하는데

문서에 나와있는대로 바꾸면 반쪽짜리가 되는 이슈가 있을 것 이다.

import {ConfigProvider} from "antd";
import ko_KR from "antd/lib/locale/ko_KR";

<ConfigProvider locale={ko_KR}>
	<App/>
</ConfigProvider>

이 뿐만 아니라 dayjs locale 도 한글로 바꿔줘야한다.

다른 블로그나 다른 곳에서 보면 moment 를 쓰라는 곳도 있지만

왠만하면 dayjs 를 사용할 수 있도록 하자.

이유는 여기서 보면 된다.

[React] Moment 대신 Day.js

아무튼 전체적인 코드를 확인해보면

import "./instrument";
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {ConfigProvider} from "antd";
import ko_KR from "antd/lib/locale/ko_KR";
import dayjs from "dayjs";
import "dayjs/locale/ko";

dayjs.locale("ko");

const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
);

root.render(
            <ConfigProvider locale={ko_KR}>
                <App/>
            </ConfigProvider>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

이런식으로 작성하면 되는데

이렇게하면 한글패치가 완벽하게 된 데이트피커를 사용할 수 있다.