[Next.js] Mui Date Picker Locale 한글 설정

개요

https://mui.com/x/react-date-pickers/localization/ 를 보면 잘 설명되어 있지만 Locale 설정하는 데에 있어 빼먹을 수 있는 부분 등을 체크해보려고 한다(잠시 헤맸던 경험 공유..)

코드

import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
import 'dayjs/locale/ko';

<LocalizationProvider dateAdapter={AdapterDayjs} adapterLocale="ko">
  {children}
</LocalizationProvider>;

기본적인 코드는 위와 같다. LocalizationProvider로 date-picker 컴포넌트를 감싸준다. adapterLocale에 언어를 설정해주며 원래 locale에서 adapterLocale로 마이그레이션 되었다. 기본은 영어이며, ko를 설정해주면 한국어로 설정된다.

주의할 점은 import 'dayjs/locale/ko'를 반드시 import 해줘야한다. VS code에서 경로를 찾아주지 않고 딱히 에러도 표시하지 않아 적용이 안되어 잠시 헤맸었다.

그럼 아래와 같이 정상적으로 한글이 적용되어 date-picker가 표기되는 걸 확인할 수 있다.