글로벌 유저들에 대비해 국제화를 진행하였습니다.
i18n 이라고도 불리기도 하는데, 한국어를 해외의 언어들로 변환시켜주는 기능을 얘기합니다.

저는 react-i18n-next 를 사용하였습니다.

그저 번역뿐만아니라, 나라에 따라 화폐, 단위, 시간 등이 다르기 때문에 당장은 번역에 불가할 지라도, 미리 적용시켜 놓는것이 좋다고 생각했습니다.

"만나서 반가워요" => "nice to meet you"

이 기능은 구현하는 원리는 간단합니다.

ko_KR.json 이 있고

{
  "만나서 반가워요": "만나서 반가워요"
}

en_US.json 이 있습니다.

{
  "만나서 반가워요": "nice to meet you"
}

key : value 로 된 json 파일에서 원하는 값을 읽으면 가능합니다.

하지만 여기서의 Key 는 문자열 그 자체이기 때문에 추천하지 않습니다.
띄어쓰기나 마침표 하나라도 변하게 된다면 기능이 되지 않습니다.

그래서 key 를 변수로 만들고 정리해서 사용하기로 했습니다.

{
  "greet" : "만나서 반가워요"
}
{
  "greet":"nice to meet you"
}

i18next 설정하기

i18next 설치를 해줍니다.
npm install react-i18next i18next --save

src/locale 폴더를 만들고 index.ts 를 만들어 세팅에 대한 내용을 적어줍니다.

import en from "./en_US";
import ko from "./ko_KR";

i18n
  .use(detector) //사용자 언어 감지
  .use(initReactI18next) // passes i18n down to react-i18next
  .init(
    {
      resources: {
        ko_KR: ko,
        en_US: en,
      },
      fallbackLng: "ko",
      interpolation: {
        escapeValue: false,
      },
    },
    function(err) {
      if (err) console.error(err);
    }
  );

import ko from "./ko_KR"; 여기 안에는 위에서 언급한 Json 파일이 위치합니다.
locale/ko_KR/index.ts 에서 json 파일을 읽어 내보내줍니다.

import page from "./page.json";

export default {
  page,
};

세팅 끝입니다. 이 세팅 파일을 App.ts 에서 불러와줍니다
import "./locale/index";
그 다음 전역변수로 locale 값을 만들고 관리합니다.

resources: {
  ko_KR: ko,
  en_US: en,
},

ko_KR 이면 ko를 en_US 이면 en 의 값을 읽겠다 의미입니다.

사용은 이렇게 합니다.
const { t } = useTranslation(["page"]);
t를 불러온 다음
{t("안녕하세요")}
key를 불러주면 사용가능합니다. 현재는 변수화를 안해줘서 key 가 문자열입니다.

---

JSON 파일을 직접 적는 것이 귀찮아졌습니다.
그리고 팀원과 함께 작업하기에는 JSON파일의 규율을 맞춰야 할것입니다.
다음 장에서 엑셀로 정리하는 방법을 적용해보겠습니다.