[React] i18n으로 다국어 지원하기 (i18next, react-i18next)

프로젝트에서 다국어 지원 기능을 적용하게 되었다.

나는 다른 분이 만들어 놓은 것을 적용만 했지만 해당 라이브러리를 어떻게 사용하는지 궁금해서 알아보기로 했다.

처음에는 브라우저에서 지원하는 한영변환인줄 알았는데, 그냥 서비스 안에서 따로 구현된 것이었음,,

그래서 제공될 다국어도 json으로 직접 작성해야 한다!

 

프로젝트에서는 라이브러리 i18n 을 사용했다.

Introduction - react-i18next documentation

i18next 라는 라이브러리와 이를 react에서 아주 쉽게 사용하도록 만들어진 react-i18next를 설치한다.

 

설치

---

$ npm install i18next react-i18next

// or

$ yarn add i18next react-i18next

 

 

JSON 한/영 파일 만들기

---

한영 전환을 적용하려는 페이지에 String 이라는 이름의 폴더를 만든다.

내가 참여하고 있는 프로젝트에서는 페이지마다 String 폴더를 만들었지만, 필요에 따라 다른 규칙을 적용하면 좋을 것 같다.

번역의 일관성을 위해서는 하나로 관리하는게 더 나을지도?

 

여기서는 국문, 영문 두가지로 연습을 할 것이다.

String 폴더를 App.tsx 옆에 생성한 뒤에 폴더 하위에 ko.ts와 en.ts 파일을 각각 만들어둔다.

그 다음 key-value의 형태로 각각 페이지에서 사용할 언어를 정리한다.

아래에서는 'HELLO' 라는 key에 '안녕하세요', 'Hello'를 각각 매핑했다.

HOME은 그냥 페이지별로 String 파일을 생성했을때 쉽게 구별하기 위해서 페이지 이름으로 해본 것. (App.tsx가 홈페이지라고 가정)

// ko.ts

export const HOME = {
    HELLO : '안녕하세요 ;)'
}

// en.ts

export const HOME = {
    HELLO : 'Hello ;)'
}

 

 

각 페이지에서 사용할 json 모아두기

---

다음과 같이 폴더와 파일을 생성한다.

이 실습에서는 각 폴더마다 String 파일이 존재할 거니까 utils의 String에 한번에 모아뒀다가 한번에 적용할 것이다.

관리하는 폴더가 하나일 경우에서는 바로 다음 단계로 넘어가도 괜찮을 것 같다. 안해봤지만요..

├─ src
│  └─ utils
│     └─ String
│        ├─ en.ts
│        └─ ko.ts

// utils/String/en.ts

import { HOME } from '../../String/en';

export default {
    HOME,
}

// utils/String/ko.ts

import { HOME } from '../../String/ko';

export default {
    HOME,
}

 

 

i18n.ts

---

이제 우리가 만든 한영 파일을 사용할 수 있도록 등록해야 한다.

index.tsx 파일의 옆에 i18n.ts 폴더를 생성하고 그 위에 코드를 작성한다.

import { initReactI18next } from 'react-i18next';

import i18n from 'i18next';

// 적용할 다국어 import 해오기
import en from './utils/String/en';
import ko from './utils/String/ko';

export const defaultNS = 'translation';
export const resources = {
    ko: {
        ...ko,  // ko로 설정할 경우 해당 JSON 파일을 사용
    },
    en: {
        ...en,  // en로 설정할 경우 해당 JSON 파일을 사용
    },
};

i18n.use(initReactI18next).init({
    lng: localStorage.getItem('language') || 'ko', // 초기 언어 지정, 로컬 스토리지 먼저 확인하여 default 언어를 초기 언어로 지정한다.
    resources,  // 언어 리소스를 정의한 객체. 사용자가 다른 언어로 전환할때 해당 언어에 맞는 리소스를 제공한다.
    defaultNS,
    fallbackLng: 'ko', // 번역이 지원되지 않을 경우에 제공될 언어.
    interpolation: {
        escapeValue: false, // 사용자가 입력한 값이 HTML로 해석되는 것을 방지한다.
    },
});

export default i18n;

 

 

적용하기

---

만든 i18n.ts 파일을 import 한다.

파일을 import 해주는 것만으로 여기서 할 수 있는 작업은 끝났다.

 

App.tsx에서 사용해보자.

import { useTranslation } from "react-i18next";

// ...

const { t } = useTranslation("변수명");

return (
	      <Typography>{t("Key")}</Typography>
)

사용 방법은 위와 같다.

import { Button, Stack, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import "./App.css";

function App() {
  const { t } = useTranslation("HOME");
  return (
    <Stack className="App" style={{ padding: "30px" }} gap="20px" alignItems="center">
      <Button variant="outlined" >언어 변경</Button>
      <Typography>{t("HELLO")}</Typography>
    </Stack>
  );
}

export default App;

useTranslation의 i18n 인스턴스와 onClick 이벤트로 언어를 변경할 수 있다.

import { Button, Stack, Typography } from "@mui/material";
import { useTranslation } from "react-i18next";
import "./App.css";

function App() {
  const { t } = useTranslation("HOME");
  const { i18n } = useTranslation();

  const handleChangeLang = () => {
    const currentLang = i18n.language; // i18n에서 현재 언어 파악하기
    if (currentLang === "ko") i18n.changeLanguage("en");
    else if (currentLang === "en") i18n.changeLanguage("ko");
  };

  return (
    <Stack
      className="App"
      style={{ padding: "30px" }}
      gap="20px"
      alignItems="center"
    >
      <Button variant="outlined" onClick={handleChangeLang}>언어 변경</Button>
      <Typography>{t("HELLO")}</Typography>
    </Stack>
  );
}

export default App;

언어 변경 버튼을 클릭하면 아주 잘 동작하는 것을 확인할 수 있다.

 

 

 

마치며

---

공부할 것이 너무나도 많다.. 그래도 오늘 하나 공부했으니까요! 뿌덧해욥

최근에는 내가 너무 부족하다고 느꼈는데요. 생각해보니 성장할 일만 남은 사람이잔아요? 그냥 걱정없이 살기로~