react-intl (international, 다국어 관련)

react node

<FormattedMessage> 사용하려면 IntlProvider를 윗단에서 아래와 같이 제공해줘야 함

import { IntlProvider } from "react-intl";
import enUsMsg from "./lang/en-US.json";
import koMsg from "./lang/ko.json";
import Page from "./Page";

const locale = localStorage.getItem("locale") ?? "ko";
const messages = { "en-US": enUsMsg, ko: koMsg }[locale];

function App() {
  return (
    <IntlProvider locale={locale} messages={messages}>
      <Page />
    </IntlProvider>
  );
}

import { FormattedMessage } from 'react-intl';

<FormattedMessage id={'user.table.tool.total'}/> //총 사용자 : {total}
<FormattedMessage id={'user.table.tool.total'} values={{total: 1000}}/> //총 사용자 : 1000, values는 넘겨주는 변수지정
<FormattedMessage id={'user.table.tool.total'} defaultMessage='notFound' /> //id에 해당하는 번역어 없을때, defaultMessage나옴 defaultMessage없으면 id가 나옴

ui에 나타날때  padding 위아래 10 차지함 

String

String으로 쓰려면 useIntl이나 ingetIntl로 intl객체를 props로 받아와서 intl.formatMessage({id:...}) 형태로 사용해야함

import {injectIntl} from "react-intl";

const title = intl.formatMessage({id: 'index.portal.title'});

export injectIntl(...);