i18n 적용하기
3225 단어 typescripti18nextReactReact
설치
yarn add i18next
yarn add i18next-browser-languagedetector
yarn add react-i18next
yarn add @types/react-i18next
i18n.ts
import i18next from 'i18next'
import detector from 'i18next-browser-languagedetector';
import { initReactI18next } from 'react-i18next'
import tranEn from './locales/en.json';
import tranKo from './locales/ko.json';
const resources = {
en: { translation: tranEn },
ko: { translation: tranKo },
}
i18next
.use(initReactI18next)
.use(detector)
.init({
detection:{order:['path','navigator']}, // default locale 우선순위 ( path -> browser detected)
resources,
fallbackLng: 'en',
keySeparator: false,
interpolation: {
escapeValue: false
}
})
export default i18next;
index.tsx
import './i18n'
components
import { useTranslation } from "react-i18next";
const component : FC = (props) =>{
const{t, i18n } = useTranslation();
const handleChangeLanguage = (lang:string) => {
i18n.changeLanguage(lang);
}
const locale = i18n.language.substring(0,2); /* browser detected 일 경우 'en-US', 'ko-KR' 형태이기 때문에 앞에 2자리만 사용 */
return(
<>
<Select defaultValue={locale} style={{width:100}} onChange={handleChangeLanguage}>
<Option value="en">{t('language_en')}</Option>
<Option value="ko">{t('language_ko')}</Option>
</Select>
</>
)
}
Author And Source
이 문제에 관하여(i18n 적용하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@cyong80/s4저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)