[React] react-datepicker 언어 바꾸기 (한국어로 변경하는 방법)

Intro

안녕하세요. 이번 시간에는 react-datepicker 라이브러리에서 언어를 바꾸는 방법에 대해 알아보도록 하겠습니다. 참고로 react-datepicker 는 react에서 많이 사용하는 달력 라이브러리입니다. 

 

How to Change lang

 

가장 먼저 date-fns를 설치해줍니다. npm을 사용하신다면 npm을 이용해주시면 됩니다. 

yarn add date-fns

 

 

이후 사용하고자 하는 언어를 import 해줍니다. 

import { ko } from "date-fns/esm/locale";

  <DatePicker
    locale={ko}
    isClearable
    selectsRange
    monthsShown={2}
    endDate={endDateRange}
    selected={startDateRange}
    startDate={startDateRange}
    shouldCloseOnSelect={false}
    id='date-range-picker-months'
    onChange={handleOnChangeRange}
    customInput={
        <CustomInput
        dates={dates}
        setDates={setDates}
        label='Invoice Date'
        end={endDateRange as number | Date}
        start={startDateRange as number | Date}
        />
    }
  />

 

 

local={ko}를 적용한 결과 아래와 같이 캘린더 언어가 한국어로 변경된 모습을 확인할 수 있습니다.