useTranslation

Introduce

텍스트를 사용자가 지정한 언어로 변경합니다.

interface UseTranslationReturns {
  t: (key: string, variables?: { [key: string]: string | number }) => string;
  language: string;
  changeLanguage: (lang: string) => void;
}
 
const useTranslation = (): UseTranslationReturns

changeLanguage() 함수를 사용해 언어를 지정할 수 있습니다.
t() 함수를 사용해 지정한 언어에 해당하는 번역된 텍스트를 가져올 수 있습니다.

Examples

💡

useTranslation()을 사용하기 전에 먼저 TranslationProvider를 선언해야 합니다.

import ReactDOM from 'react-dom/client';
import App from './App';
import { TranslationProvider } from './context/TranslationContext';
 
const translations = {
  en: {
    greeting: 'Hello ${name}, You have ${count} new messages.',
    farewell: 'Goodbye ${name}',
  },
  ko: {
    greeting: '안녕하세요 ${name}, 새 메시지가 ${count}개 있습니다.',
    farewell: '안녕히 가세요 ${name}',
  },
};
 
ReactDOM.createRoot(document.getElementById('root')!).render(
  <TranslationProvider translations={translations} defaultLanguage="en">
    <App />
  </TranslationProvider>
);

import { useTranslation } from './hooks/useTranslation';
 
const App = () => {
  const { t, language, changeLanguage } = useTranslation();
 
  const handleLanguageChange = (lang: string) => {
    changeLanguage(lang);
  };
 
  return (
    <div>
      <h1>{t('greeting', { name: 'Choo', count: 5 })}</h1>
      <p>{t('farewell', { name: 'Choo' })}</p>
 
      <div>
        <button onClick={() => handleLanguageChange('en')}>English</button>
        <button onClick={() => handleLanguageChange('ko')}>한국어</button>
      </div>
 
      <p>Current Language: {language}</p>
    </div>
  );
};
 
export default App;

useToggle useUnmountEffect