i18next로 React 앱 국제화

오늘날 우리의 응용 프로그램은 이전에는 상상할 수 없었던 비율을 차지했으며 웹은 우리에게 전 세계에서 액세스할 수 있는 가능성을 제공했습니다. 이것은 많은 개발자들이 문제에 직면하는 곳입니다...

내 앱을 빠르고 효율적으로 번역하려면 어떻게 해야 합니까?

다행스럽게도 React와 같은 라이브러리에는 이 기능을 구현하기 위한 매우 쉬운 대안이 있으며 오늘은 그 중 하나인 i18next 플러그인을 만나보겠습니다.

국제화 구현

시작하려면 우리 시설로 갑시다. 처음부터 앱을 시작하려면 아래 명령을 사용하고 새 반응 앱을 생성해 보겠습니다.

yarn create react-app i18napp --template typescript

이미 프로젝트가 있거나 방금 생성한 경우 i18next가 제대로 작동하는 데 필요한 종속 항목을 설치합니다.

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

자, 이제 우리는 이미 필요한 패키지를 가지고 있습니다. 코드를 손에 넣자!!!

i18next 구성

앱에 국제화 사용을 표시하고 후크를 적절하게 활성화하려면 index.js 옆에 있을 파일을 준비해야 합니다. 이 파일은 i18n.js라고 하며 다음 줄이 포함됩니다.

import i18n from 'i18next'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'
import { initReactI18next } from 'react-i18next'

i18n
  // Enables the i18next backend
  .use(Backend)
  // Enable automatic language detection
  .use(LanguageDetector)
  // Enables the hook initialization module
  .use (initReactI18next)
  .init({
    // Standard language used
    fallbackLng: 'en',
    debug: true,
    //Detects and caches a cookie from the language provided
    detection: {
      order: ['queryString', 'cookie'],
      cache: ['cookie']
    },
    interpolation: {
      escapeValue: false
    }
  })

export default i18n;

그런 다음 다음과 같이 index.js로 가져와야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

모든 설정, 반응 i18next가 활성화되고 사용할 준비가 되었습니다. 이제 다음 단계는 번역을 통합하는 것입니다.

로케일 통합

웹에서의 국제화는 단어 섹션이 있는 json을 기반으로 작동합니다. 이 앱에서는 영어와 포르투갈어를 통합합니다.

이를 위해/public 폴더에 두 개의 하위 폴더/en 및/pt가 있는/locales 폴더를 추가합니다. 둘 다 번역이 포함된 개체를 포함하는 translation.json 파일이 있습니다. 영어로 된 파일의 예와 생성된 폴더의 구조를 참조하십시오.

{
  "title": "Welcome to an internationalized APP",
  "description": {
    "part1": "To get started, edit <1>src/App.js</1> and save to reload.",
    "part2": "Switch language between english and portuguese using buttons above."
  }
}

로케일 폴더 구조

완료되었습니다. 홈페이지에서 비즈니스를 시작하겠습니다.

App.js 커스터마이징

이제 마지막 부분인 홈 페이지를 구축해 보겠습니다. 이를 위해 App.js의 원본 콘텐츠를 삭제하고 div 하나만 남깁니다.

번역 후크 가져오기

i18next 후크를 가져오려면 다음 코드를 사용합니다.

import {useTranslation} from "react-i18next";

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

t 속성은 현지화 상태의 변화를 관찰하기 위해 번역과 i18n을 통합하는 데 사용됩니다.

태그에서 번역 사용

객체의 속성을 사용하려면 위에서 구조화한 t() 함수를 호출하기만 하면 됩니다.

   <div><h1>{t("title")}</h1></div>

얼마나 쉬운지 보시겠습니까?

언어를 변경하고 실시간으로 마법을 볼 수 있는 두 개의 버튼을 추가하여 아래 코드로 앱을 완성할 것입니다...

import React from "react";
import "./App.css";
import { useTranslation } from "react-i18next";

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

  const changeLanguage = (language) => {
    i18n.changeLanguage(language);
  };

  return (
    <div className="App">
      <button onClick={() => changeLanguage("en")}>EN</button>
      <button onClick={() => changeLanguage("pt")}>PT</button>
      <hr />
      <div><h1>{t("title")}</h1></div>
      <div>{t("description.part1")}</div>
      <div>{t("description.part2")}</div>
    </div>
  );
}

export default App;

마법을 관찰하다

코드를 올바르게 입력했다면 아래의 마법이 앱에 발생해야 합니다. 번역은 런타임에 수행됩니다.



당신은 좋아 했습니까? 코드는 내github에서 사용할 수 있습니다.

읽어 주셔서 감사합니다!!!