[#. React] React UI Framework ant design에서 Internationalization을 통해 한글 설정, 사용하기

 

 

 

 

 

React 프로젝트에서 UI 프레임워크로 ant design(antd)을 사용하고 있다

 

https://ant.design/

Ant Design - The world's second most popular React UI framework

 

 

 

 

 

 

 

그중 Form을 사용하면서 설정한 rule과 다른 내용이 input에 입력되면 경고 메시지를 띄우려고 한다

 

 

 

 

<Form.Item
   label="비밀번호(소문자, 숫자, 특수문자 포함 8~16자):"
   name="password1"
   rules={[{ required: true, pattern: '^(?=.*[a-z])(?=.*\d)(?=.*[$@$!%*#?&])[a-z\d$@$!%*#?&]{8,16}$', message: '다시 입력해 주세요' }]}
>
   <Input.Password value={password1} onChange={onChangePwd1} />
</Form.Item>

 

이런 식으로 '다시 입력해 주세요'라는 경고 메시지를 뜨게 하려고 하는데

영어로만 뜨고 한글은 뜨지 않는다

 

antd에서 한국어를 사용하려면 Internationalization 설정을 따로 해줘야 한다

 

 

 

 

 

 

① 프로젝트 폴더/src/index.js

 

import { ConfigProvider } from 'antd';	// 추가
import koKR from 'antd/lib/locale/ko_KR';	// 추가

ReactDOM.render(
    <BrowserRouter>
      <ConfigProvider locale={koKR}>	// 추가
        <App />
      </ConfigProvider>
    </BrowserRouter>,
  document.getElementById('root')
)

 

 

 

 

 

 

이렇게 세팅한 후 message에 한글을 입력하면 경고 메시지가 잘 뜨는 것을 확인할 수 있다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

https://ant.design/docs/react/i18n

Internationalization - Ant Design