[React.js] i18next로 다국어 처리하기

What is i18next?

JS로 작성된 국제화 프레임워크로, 다국어 처리를 도와준다. 내가 진행하는 프로젝트의 오픈소스가 이 프레임워크로 다국어 처리를 하고 있었기 때문에 자세한 초기 설정법은 모르고, 컴포넌트에서 이를 어떻게 적용하는지 정리해 보려고 한다.

JSX 안에서 적용

가장 기본적인 사용 방법
컴포넌트 가장 상단에 import 후,

const { t } = useTranslation();
const = { t } = this.props;

props로 내려받거나 함수를 그대로 사용하냐에 따라서 const 선언을 해 준다

그리고 JSX Element에 아래와 같이 사용해 주면 된다

<span>{t("chat.math")}</span>

or

<Input
 	aria-label = { this.props.t('chat.messagebox') }
	placeholder = { this.props.t('chat.messagebox') }/>

그리고 꼭 export 잊지 말기

export default translate(`componentName`);

사용자 정의 함수 안에서 적용

근데 JSX 엘리먼트 안에서 적용하는 법은 알겠는데, 내가 정의한 함수들 내에서 리턴하는 값들에 다국어 처리를 적용하려 했는데 잘 되지 않았다... 다소 무식한 방법일 수도 있지만 나는 아래와 같이 적용하였다.

const 다국어처리할변수(리턴값) = {
            "angry": i18next.t("faceRecognition.surprise"),
        };

프레임워크의 구조를 보니까 i18next 프레임워크 안에 t라는 함수(?)가 정의되어 있는 것 같았다. 그래서 냅다 i18next.t로 다국어 처리 적용!