[React] react-intl을 활용한 다국어 지원

$ npm i react-intl

npm 을 이용해 react-intl을 설치해준다.

다국어를 지원하기 위해 키를 만들어한다.

// ko.json

{
"title": "react-intl"
"content": "react-intl을 활용한 다국어 지원"
}

// en.json

{
"title": "react-intl"
"content": "Multilingual support using react-intl"
}

이렇게 json파일을 만들면 title과 content가 키 값이 된다.

// App.tsx

import { IntlProvider } from "react-intl";
import en from "../locales/en.json";
import ja from "../locales/ja.json";
import ko from "../locales/ko.json";
import Page from "./Page";

const language = navigator.language.toLowerCase();
const messages = { "en-US": en, ko: ko }[language];

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

https://developer.mozilla.org/ko/docs/Web/API/Navigator

navigator.language를 사용하면 브라우저의 UI 설정 언어를 가져올 수 있다.
따라서 사용자가 설정한 언어에 맞게 화면의 언어를 설정할 수 있게 된다.

키로 설정한 언어들을 사용할 때는

import { FormattedMessage } from "react-intl";

FormattedMessage과 가져와주고

<FormattedMessage id="title"/>

컴포넌트를 그리는 곳에서 이렇게 사용하면 된다.