이 기사에서는 React 앱을 여러 언어로 번역하는 방법과 사용자의 로케일에서 자동으로 날짜 형식을 지정하는 방법을 보여줍니다.

지역화된 형식을 사용하여 날짜를 렌더링하는 것이 중요합니다. 예를 들어 미국에서는 MM/DD/YYYY 를 사용하고 일부 다른 국가에서는 DD/MM/YYYY 를 사용합니다.

우리는 i18next 및 date-fns 과 함께 React를 사용할 것입니다.



순진한 해결책은 번역과 날짜 형식의 개념을 별도로 처리하는 것입니다.

render() {
   return <span>
      {t('article.postedOn')}
      {format(article.date, 'MM/DD/YYYY')}
   </span>;
}

이 기사의 최종 결과는 번역 함수에 Date 객체를 전달하고 사용할 날짜 형식을 쉽게 선언할 수 있다는 것입니다.

// In our React component:
render() {
   return <span>
      { t('article.postedOn', {date: new Date()}) }
   </span>;
}

// In our translation bundle:
{ "article": 
   { "postedOn": "This article was posted on {{ date, short }}" }
}

그러면 사용자에게 다음과 같은 메시지가 표시됩니다. This article was posted on 12/19/2020 .

반응 i18next

i18next은 앱에서 번역을 관리하는 인기 있는 솔루션입니다. React와 함께 사용하도록 구성하는 방법에 대해서는 자세히 설명하지 않겠습니다. 이 기사의 설정으로 this guide을 사용했습니다.

앱에서 i18next 사용

기본 아이디어는 t() 함수를 사용하여 문자열을 번역할 수 있다는 것입니다. 번역 키를 전달하면 i18next가 번들에서 현재 활성화된 로케일에 대한 번역을 조회합니다.

import { useTranslation } from "react-i18next";

const MyComponent = () => {
   const { t } = useTranslation();
   return <span>{ t('messages.welcome') }</span>;
};

번역 번들

지원하는 각 언어에 대해 번역 번들을 JSON으로 생성하고 i18next에 전달합니다.

{
    "en": {
        "translation": {
            "messages": {
                "welcome": "Welcome!"
            }
        }
    },
    "nl": {
        "translation": {
            "messages": {
                "welcome": "Welkom!"
            }
        }
    }
}

i18next 설정

라이브러리를 설치합니다.

npm install react-i18next i18next

라이브러리를 구성하는 새 모듈i18next.js을 생성합니다.

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

// Here we import the bundle file as defined above
import resources from "./translation.json";

i18n.use(initReactI18next) // passes i18n down to react-i18next
    .init({
        resources,
        lng: "en",

        interpolation: {
            // react already saves from xss
            escapeValue: false
        }
    });

export default i18n;

그리고 앱에서 이 파일을 가져오기만 하면 됩니다.

보간

번역된 텍스트에 이름이나 날짜를 사용해야 하는 경우가 일반적입니다. 번역된 문자열에서 동적 값의 위치는 언어마다 다를 수 있으므로 중괄호가 있는 템플릿 문자열을 사용하고 변수를 t() 함수에 전달합니다.

t('welcome', {name: 'John'});

// translation bundle:
{ "welcome": "Welcome {{ name }}" }

이것은 i18next에서 interpolation이라고 합니다.

날짜-fns 추가

Date-fns은 JS에서 날짜 작업을 위한 모듈식 라이브러리이며 모놀리식MomentJS에 대한 대중적인 대안입니다. 설치하기 위해서:

npm install date-fns

i18next로 자동으로 날짜 형식 지정

i18next.js 파일에서 date-fns에서 몇 가지 항목을 가져와야 합니다.

import { format as formatDate, isDate } from "date-fns";
import { en, nl } from "date-fns/locale"; // import all locales we need

const locales = { en, nl }; // used to look up the required locale

그런 다음 i18next에 다음 구성을 추가합니다.

interpolation: {
    format: (value, format, lng) => {
        if (isDate(value)) {
            const locale = locales[lng];
            return formatDate(value, format, { locale });
        }
    }
}

동적 값이 날짜인지 확인한 다음 date-fns가 형식을 지정하도록 합니다. options 의 세 번째format() 매개변수로 사용할 로케일 객체를 date-fns에 알려줍니다.

이제 Date 함수의 옵션에서 t() 개체를 전달하면 자동으로 형식이 지정됩니다. 번역 번들의 중괄호 안에 형식을 설정할 수 있습니다.

{ "postedOn": "Posted on {{ date, MM/DD/YYYY }}"}

위에서 설명한 것처럼 모든 언어가 동일한 날짜 형식을 사용하는 것은 아닙니다. 다행히 date-fns는 로케일 인식 날짜 형식을 제공합니다.



따라서 MM/DD/YYYY 대신 P 를 사용해야 합니다. locale 옵션을 format function 에 전달하는 것을 잊지 마십시오.

날짜 형식을 쉽게 사용할 수 있도록 앱에서 사용하려는 일부 형식기를 미리 정의할 수 있습니다.

format: (value, format, lng) => {
    if (isDate(value)) {
        const locale = locales[lng];

        if (format === "short")
            return formatDate(value, "P", { locale });
        if (format === "long")
            return formatDate(value, "PPPP", { locale });
        if (format === "relative")
            return formatRelative(value, new Date(), { locale });
        if (format === "ago")
            return formatDistance(value, new Date(), {
                locale,
                addSuffix: true
            });

        return formatDate(value, format, { locale });
    }

    return value;
}

여기에서는 formatDistance 및 formatRelative과 같은 강력한 date-fns 함수를 사용하여 사람이 읽을 수 있는 과거 날짜 표현을 만듭니다.

이제 번역 번들의 포맷터 세트에서 간단히 선택할 수 있습니다.

{ "postedOn": "Posted on {{ date, short }}"}

import { useTranslation } from "react-i18next";
const { t } = useTranslation();

// 'Posted on 11/10/2021'
t('postedOn', { date: new Date() });