i18n 후크를 사용한 React 번역

소개

최근 내 작업에서 React로 빌드된 프로젝트에 대한 번역을 포함해야 할 필요성이 생겼습니다. 나는 누군가가 도움이 될 것이라고 생각하는이 솔루션을 조사하고 찾아 왔습니다.

필요한 패키지 설치

이러한 패키지를 설치하려면 이전에 설치 및 구성해야 합니다npm.

npm을 설치했으면 다음 패키지를 설치해야 합니다.
npm install --save i18next
npm install --save react-i18next
npm install --save i18next-browser-languagedetector

번역이 저장될 파일 생성

src 내에 translations라는 폴더를 생성하고, translations 폴더 내에 번역을 추가할 각 언어에 대한 폴더를 생성합니다.

./src
    ./translations
        ./es
            ./translations.js

이 경우 스페인어에 대한 번역이 저장된 translation.js 파일을 생성합니다.

// File: translations.js

export const TRANSLATIONS_ES = {

    "female": "Femenino"

}

i18n용 구성 파일 생성

./src
    ./translations
        ./i18n.js

다음 내용으로:

// File: i18n.js

import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import LanguageDetector from "i18next-browser-languagedetector";

// import translations file
import { TRANSLATIONS_ES } from '../translations/es/translations'

i18n
    .use(LanguageDetector)
    .use(initReactI18next)
    .init({
    resources: {
        es: {
            // use translations file for spanish resources
            translation: TRANSLATIONS_ES,
        },
    }
});

구성 요소에서 번역을 위한 후크 사용

// File: ExampleComponent.js

// import hook for translations and i18n configuration file
import { useTranslation } from "react-i18next";
import '../../translations/i18n.js';

export const ExampleComponent = () => {

    // destructuring t() function for useTranslation()
    const { t } = useTranslation();

    return (
        {// using t() function for translate}
        <p>{ t('female') }</p>
    )
}

읽어주셔서 감사합니다. 😊