다국어 웹사이트를 위한 react-i18next 사용해보기

 

다국어 웹사이트 

다국어 웹사이트는 전세계에 존재하는 많은 국가들에 사이트의 정보를 제공하기 위해서 다양한 언어를 지원 가능한 웹사이트를 말합니다. 

구글 번역기를 사용하면 되는 것 아닌가? 라고 생각하실 수 있지만, 번역을 하는 것이 아니라 특정 url로 접속하거나 언어 변환 버튼을 눌렀을 때 원하는 국가의 언어로 보여주는 사이트 입니다.  

다국어 기능을 구현하는 방법은 라이브러리를 이용해서 하는 방법을 많이 사용하고 있습니다. 그 중에서도 i18next라는 라이브러리를 이용해서 다국어 기능을 구현해보겠습니다. 저는 react로 웹사이트를 만들 것이기 때문에 react-i18next 라이브러리를 사용해서 개발하도록 하겠습니다. 

 

 

react-i18next

우선 프로젝트를 먼저 만들어줍니다. 

npx create-react-app projectname

프로젝트에 react-i18next 모듈을 설치해줍니다. 

npm install react-i18next

src 하위에 i18next.js 파일을 만들고 아래와 같이 작성해줍니다. 

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

const getResourcesFromFile = () => {
    const req = require.context('./static/', true, /\.json$/);

    const resources = req.keys().reduce((_resources, filePath) => {
        const [, , lang, name] = filePath.split(/\/|\./);
        const contents = req(filePath);

        if (!_resources[lang]) {
            _resources[lang] = {};
        }

        _resources[lang][name] = contents;

        return _resources;
    }, {});
    return resources;
};

const setupI18next = () => {
    i18n.use(initReactI18next) // passes i18n down to react-i18next
        .init({
            resources: getResourcesFromFile(),
            lng: 'ko',
            fallbackLng: 'ko',
            keySeparator: false, // we do not use keys in form messages.welcome
            interpolation: {
                escapeValue: false, // react already safes from xss
            },
        });
   
};

export default setupI18next;

간단히 코드를 설명하자면 static 폴더 하위에 있는 json파일들로 다국어 기능을 구현할 것이라는 설정입니다. 

그러니 static 폴더 하위에 en, ko 폴더를 만들어줍니다. 

en폴더의 하위에 test.json파일을 만들어 아래와 같이 작성해줍니다. 

{
    "test.text": "hello"
}

ko폴더의 하위에 test.json 파일을 만들어 아래와 같이 작성해줍니다. 

{
    "test.text": "안녕"
}

다국어 부분을 작성해줬으니 App.js로 가서 사용해보도록 하겠습니다. 

import React, { useEffect } from 'react';
import './App.css';
import { useTranslation } from 'react-i18next';
import i18n from 'i18next';

function App() {
    const { t } = useTranslation('test');

    const changeEnglish = () => {
        i18n.changeLanguage('en');
    };

    const changeKorean = () => {
        i18n.changeLanguage('ko');
    };

    useEffect(() => {
        console.dir(t);
    }, []);

    return (
        <div className="App">
            {t('test.text')}
            <button onClick={changeEnglish}>영어</button>
            <button onClick={changeKorean}>한국어</button>
        </div>
    );
}

export default App;

간단하게 인사말만 다국어로 구현해보았는데요. 사이트에 사용하는 모든 단어나 문장에 대해서 위와 같은 설정을 해두고 kr.~~~~ 사이트로 접속할 경우 한국어를 보여주고 en.~~~~로 접속할 경우 영어를 보여주는 방식으로 다국어 웹사이트를 구현할 수 있을 것 같습니다.