[React] 다국어 변환 라이브러리 i18n

2022. 6. 2. 20:34·React/React Tech

웹 사이트에서 글로벌 서비스를 위해 여러 국가의 언어를 지원할 수 있도록 되도록 i18n 라이브러리를 사용해보자!

자동 번역이 되는 것은 아니고, 번역된 데이터가 담긴 JSON 파일을 프로젝트에 삽입 후, 국가 코드를 변경할 때마다 각 국가에 해당하는 JSON 파일을 읽어와 화면에 출력 해준다.

 

설치

npm install react-i18next i18next --save

yarn add react-i18next i18next

 

언어 파일

translation_ko.json

프로젝트 내에 다음과 같은 JSON 파일을 생성한다. JSX내에서 Key를 text로서 사용하면 국가 코드에 따라 Value를 출력한다.

 

i18n 설정

import i18n from "i18next";
import { initReactI18next } from "react-i18next";

//JSON 파일 import
import translationKo from "./translation.ko.json";
import translationEn from "./translation.en.json";

const resource = {
//국가 코드와 JSON 파일 match
  ko: {
    translation: translationKo,
  },
  en: {
    translation: translationEn,
  },
};

i18n.use(initReactI18next).init({
  resources: resource,
  lng: "en", //default 국가 코드
  debug: true,
  keySeparator: false,
  interpolation: { escapeValue: false },
});

//브라우저 DB에 기록된 언어가 있으면 해당 언어를 불러온다.
let language = localStorage.getItem("language");
if(language!==null)
i18n.changeLanguage(language);

//국가 코드를 변경하는 함수
export function changeLanguage() {
  i18n.changeLanguage(i18n.language === "ko" ? "en" : "ko");
  //브라우저 DB에 기록
  localStorage.setItem("language", i18n.language);
}

export default i18n;

기본적인 설정과 국가 코드를 변경하는 함수를 담은 파일을 생성한다.

 

최상위에서 호출

import "./Service/Translation/i18n";

최상위에서 해당 파일을 import 한다. import시 파일이 Read 되어진다.

 

useTranslation

const { t, i18n } = useTranslation();

useTranslation을 다음과 같이 선언한다.

 

현재 국가 코드 반환

i18n.language

 

다국어 지원 텍스트 출력

`${t('Blog')}` //JSON에 따라 '블로그'로 출력

 

저작자표시 비영리 변경금지 (새창열림)

'React > React Tech' 카테고리의 다른 글

[React] Redux Thunk (미들웨어)  (0) 2022.05.03
[React] Redux 이해하기  (0) 2022.04.17
웹사이트 성능 최적화하기 with LightHouse  (0) 2022.04.13
[React] React.Lazy() (Code Splitting)  (0) 2022.04.11
'React/React Tech' 카테고리의 다른 글
  • [React] Redux Thunk (미들웨어)
  • [React] Redux 이해하기
  • 웹사이트 성능 최적화하기 with LightHouse
  • [React] React.Lazy() (Code Splitting)
박유상의 개발블로그
박유상의 개발블로그
개발블로그
  • 박유상의 개발블로그
    박유상의 개발블로그
    박유상의 개발블로그
  • 전체
    오늘
    어제
    • 전체 (134)
      • Who am I (10)
        • Portfolio (4)
        • Reminiscence (5)
        • Oversea (1)
        • SiliconValley (0)
      • React (36)
        • React Basic (15)
        • React Tech (5)
        • JavaScript (7)
        • TypeScript (3)
        • CSS&HTML (3)
        • Firebase (3)
      • NodeJS (1)
        • NodeJS Basic (1)
      • Flutter (55)
        • Flutter Widget Design (5)
        • Flutter Widget Basic (8)
        • Flutter Tech (18)
        • Flutter Issue (7)
        • Flutter Web (6)
        • About Flutter (2)
        • Firebase (1)
        • Dev Env (1)
        • Dart (7)
      • Programming (31)
        • Web (1)
        • General (0)
        • Algorithm (25)
        • Python (1)
        • VS Code (2)
      • Django (0)
  • 블로그 메뉴

    • Who I AM
    • React
    • NodeJS
    • Flutter
    • Programming
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    useTranslation
    JavaScript
    Firebase
    플러터 웹
    Python
    flutter web
    자바스크립트
    map
    웹
    TypeScript
    Lingory
    플러터
    useState
    github
    JSON
    링고리
    알고리즘
    useRef
    탐욕법
    DP
    포트폴리오
    DART
    파이썬
    Flutter
    리액트
    CSS
    Redux
    프로그래머스
    react
    HTML
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.3
박유상의 개발블로그
[React] 다국어 변환 라이브러리 i18n
상단으로

티스토리툴바