🟦 [React] useTranslation() 란? 국제화, 다국어 번역

useTranslation()

✔ useTranslation은 react-i18next에서 제공하는 React Hook

✔ 다국어 번역을 쉽게 할 수 있도록 도와주는 기능

 

 경로: 

📂  public/locales/en/translation.json

📂  public/locales/ko/translation.json

 

👇 예제 👇

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation(); // 기본적으로 'translation' 네임스페이스를 사용

  return <h1>{t('welcome')}</h1>; // 'welcome' 키에 해당하는 번역된 문장을 가져옴
};

 

=> 불러오는 번역 파일( translation.json )에 저장해 놓았을 때, 

     언어 설정을 사용자 페이지에서 한국어로 바꾸면 환영합니다 라고 바뀜

 

📂 public/locales/ko/translation.json 

{
  "welcome": "환영합니다"
}

 

 

useTranslation([ ' ', ' ' ])

const { t } = useTranslation(['translation', 'menu']);

=> translation.js과 menu.js 둘다 참조

 

👇 예제 👇

const { t } = useTranslation(['translation', 'menu']);

return(
  <span className='custom-number3-text text-nowrap'>{t('welcome')}</span>
  <span className='custom-number3-text text-nowrap'>{t('home')}</span>
)

 

📂 public/locales/ko/translation.json

📂 public/locales/en/translation.json

{
  "welcome": "환영합니다",
  "logout": "로그아웃"
}

 

 

📂 public/locales/ko/menu.json

📂 public/locales/en/menu.json

{
  "home": "홈",
  "settings": "설정"
}