React-i18next로 다국어 지원 구현하기

npm install i18next react-i18next i18next-http-backend i18next-browser-languagedetector

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

i18n
  .use(HttpBackend) // 서버에서 리소스 로드
  .use(LanguageDetector) // 브라우저 언어 감지
  .use(initReactI18next) // 리액트와 i18next 바인딩
  .init({
    fallbackLng: 'en', // 기본 언어 설정
    debug: true,
    interpolation: {
      escapeValue: false, // XSS 보호
    },
  });

export default i18n;

{
    "welcome": "Welcome to React"
  }
  ```


`public/locales/ko/translation.json`:

#PRE lang=json
  {
    "welcome": "리액트에 오신 것을 환영합니다"
  }

import React from 'react';
import { useTranslation } from 'react-i18next';

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

  return <h1>{t('welcome')}</h1>; // 'welcome' 키에 해당하는 번역된 텍스트를 렌더링합니다.
}

export default App;

import React from 'react';
import { useTranslation } from 'react-i18next';

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

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <button onClick={() => i18n.changeLanguage('en')}>English</button>
      <button onClick={() => i18n.changeLanguage('ko')}>한국어</button>
    </div>
  );
}

export default App;