다국어지원 간단한 방법

user의 기본 언어로 설정된 언어로 간단히 다국어 지원하도록 설정해보았다.
 

navigator.language

일단 웹에서 지원하는 navigator.language을 사용한다.
 

import React, { createContext, useContext, useState, useEffect } from 'react';
import { texts } from './texts';

export type Language = 'en' | 'ko';

interface LanguageContextType {
  language: Language;
  texts: { [key: string]: string };
  t: (key: string) => string;
}

const LanguageContext = createContext<LanguageContextType | undefined>(undefined);

export const LanguageProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
  const [language, setLanguage] = useState<Language>('en');
  const [currentTexts, setCurrentTexts] = useState<{ [key: string]: string }>(texts['en']);

  useEffect(() => {
    const userLanguage = navigator.language.split('-')[0] as Language;
    setLanguage(userLanguage);
    setCurrentTexts(texts[userLanguage]);
  }, []);

  const t = (key: string) => currentTexts[key] || key;

  return (
    <LanguageContext.Provider value={{ language, texts: currentTexts, t }}>
      {children}
    </LanguageContext.Provider>
  );
};

export const useLanguage = () => {
  const context = useContext(LanguageContext);
  if (!context) {
    throw new Error('useLanguage must be used within a LanguageProvider');
  }
  return context;
};

 
그리고 간단하게 text는 object으로 만들어놓고 가져오는 방법이 있다.

import { Language } from './LanguageContext';

export const texts: { [lang in Language]: { [key: string]: string } } = {
  en: {
    title: 'title',
    greeting: 'hello'
  },
  ko: {
  	title: '제목',
    greeting: '안녕'
  }
};

 
이런 식으로 쭉쭉 작성해놓은 다음

const { t } = useLanguage();

return (
  <div>
    <h1>{t('title')}</h1>
    <p>{t('greeting')}</p>
  </div>
);

이렇게 사용하면 끝
간단하게 다국어지원을 해볼 수 있다.