프론트엔드 국제 지원을 달성하기 위해 React와 JavaScript를 사용하는 방법

// i18n.js
import React from 'react';

const availableLanguages = ['en', 'zh'];

const translations = {
  en: require('./en.json'),
  zh: require('./zh.json'),
};

export const I18nContext = React.createContext();

export function I18nProvider({ children }) {
  const [language, setLanguage] = React.useState('en');

  const translate = (key) => {
    return translations[language][key];
  };

  const switchLanguage = (lang) => {
    if (availableLanguages.includes(lang)) {
      setLanguage(lang);
    }
  };

  return (
    <I18nContext.Provider value={{ language, switchLanguage, translate }}>
      {children}
    </I18nContext.Provider>
  );
}

// App.js
import React from 'react';
import { I18nProvider } from './i18n';

function App() {
  return (
    <I18nProvider>
      <div>
        <h1>国际化示例</h1>
        <LanguageSwitcher />
        <WelcomeMessage />
      </div>
    </I18nProvider>
  );
}

function LanguageSwitcher() {
  const { switchLanguage } = React.useContext(I18nContext);
  
  const handleLanguageChange = (event) => {
    switchLanguage(event.target.value);
  };

  return (
    <select onChange={handleLanguageChange}>
      <option value="en">English</option>
      <option value="zh">中文</option>
    </select>
  );
}

function WelcomeMessage() {
  const { language, translate } = React.useContext(I18nContext);

  return <p>{translate('welcome')}</p>;
}

export default App;

// en.json
{
  "welcome": "Welcome to React Localization Example"
}

// zh.json
{
  "welcome": "欢迎使用 React 国际化示例"
}