npm i react-intl
다국어 지원기능을 만들어주는 라이브러리다.
* i18n : internationalization - 다국어 지원 시스템을 의미하는 약어다.
( i로 시작해서 n으로 끝나고 그 사이에 18개 알파벳이 있는 단어를 축약한거라고 한다. g11n - globalization, l10n - localization 등등 다른 축약 표현도 있다. )
* 대표적인 다국어 지원 라이브러리로는
- react-intl , next-intl, i18next 이 있다.
여기서는 react-intl 을 사용한다. 이게 formatjs와 동일한거라고 한다.
intlProvider로 <App/> 내부 jsx를 감싸주면 파일 전체에서 사용 가능하다. 이부분은 형태가 다양할테니 예시는 생략
* 사용법 (기본 형태)
1. formattedMessage
- jsx 안에서만 사용이 가능함. 적용파일 바뀌면 바로 바뀜.
- 간단하게 ui 렌더링만 한다고 했을때 사용
- 문법 : <formattedMessage id = "AUTH.LOGIN"/>
2. intl.formatMessage
- 함수나 jsx 안에서 모두 사용 가능.
- useIntl() 을 해줘야 한다는 번거로움이 있음
- 문법 : intl.formatMessage({id: "AUTH.LOGIN"})
* 동적 할당 문법
{
"CONTACT_ADMIN_WITH_ERRORCODE": "관리자에게 문의하세요. error code: {msg}"
}
1. formatMessage 형태
<formattedMessage id="..." values={{ msg : errorCode }} />
2. intl.formattedMessage() 형태
{intl.formatMessage(
{ id: "CONTACT_ADMIN_WITH_ERRORCODE" },
{ msg: errorCode }
)}