[ Vite + React ] i18n 언어 변경 기능 구현하기

페이지에 언어 변경이 가능한 페이지를 구현하기 위해서 i18n을 사용

 

우선 i18n 라이브러리를 설치합니다.

npm install i18next react-i18next

---

Initalized

i18n 초기 세팅을 위해

루트 경로에 i18n.ts 파일을 만들어서 기본 언어 설정 및 사용할 언어 리소스를 추가해줍니다.

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { enTranslation, koTranslation } from './locales/index';

i18n
    .use(initReactI18next)
    .init({
        resources: {
            en: { translation: enTranslation }, // 영어 리소스
            ko: { translation: koTranslation }, // 한국어 리소스
        },
        lng: 'ko', // 기본 언어 설정
        fallbackLng: 'ko', // 언어가 없을 경우 한국어로 fallback
        interpolation: {
            escapeValue: false, // React에서 XSS 방지 처리를 하지 않음
        },
    });

export default i18n;

 

언어 리소스는 json으로 만들 수 있지만 타입스크립트를 활용해서 만들생각이기에

언어 리소스 타입을 만듭니다.

// src/locales/types.ts
export interface Translation {
    home: string,
    home2:string,
}

 

이후 만든 타입을 이용해서 각 언어 리소스들을 만들어 줍니다.

import {Translation} from "@/types";

export const koTranslation:Translation = {
    home: '홈',
    home2: '홈',
};

 

import {Translation} from "@/types";

export const enTranslation:Translation = {
    home: 'homeTest',
    home2: 'homeTest2',
};

 

우선 테스트를 위해서 간단하게 실행

이후에는 언어 기능을 추가적으로 작업할때 local storage 및 db 원하는 방식으로 처리를해서 저장하면 되는데

main.tsx 파일에서 처음 로딩시 i18n.ts파일을 실행시켜주기위해 임시로 console로 찍어주면서 실행

 

i18n.language는 현재 선택된 언어

import { createRoot } from 'react-dom/client'
import './style/index.scss'
import App from './App.tsx'
import {BrowserRouter} from "react-router-dom";
import i18n from './i18n.ts';

// 언어 localStorage에 추후 저장하여 관리
console.log('init language:', i18n.language);

createRoot(document.getElementById('root')!).render(
  // <StrictMode>
      <BrowserRouter>
          <App />
      </BrowserRouter>
  // </StrictMode>,
)

---

Useage

원래는 t를 추가해서 사용할 수 있고, t 안에는 key값을 넣어줍니다.

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

  return (
    <>
      <h1>{t('home')}</h1>
    </>
)

 

하지만 페이지 성격에 따라서 언어 변경이 불가한 곳이 있을 것같아서 위처럼 t를 사용하지 않고 따로 언어변경 함수를 만들어서 사용

 

언어 key값과 변경할 언어를 파라미터로 입력받을 수 있게 하며, 
변경 언어 파라미터를 보내지 않으면 기본 i18n에서 설정된 언어로 return하도록 처리

// src/utils/translate.ts

import i18n from 'i18next';

// 번역된 텍스트를 반환하는 함수
export const translate = (key?: string, language?: string) => {
    if (!key) return '';

    return i18n.t(key, { lng: language || i18n.language });
};

 

그럼 이렇게 파라미터를 넣으면

언어 리소스에서 설정한 값으로 화면에 출력된다.

현재 i18n에서 기본 언어 리소스는 ko로 되어있으므로 언어 파라미터를 보내지 않으면 ko로 선택되어

ko에서 설정한 리소스값이 화면에 표출된다.

<span>{translate('home')}</span>
<span>{translate('home2')}</span>

 

언어 파라미터에 en을 넣으면 en 리소스에서 값을 가져온다.

<span>{translate('home',en)}</span>
<span>{translate('home2',en)}</span>

 

이렇게 i18n을 활용하면 좀 더 편하게 언어 변경 기능을 구현할 수 있다.