React 프로젝트: 인증이 있는 게시물의 해시태그 — 파트 #4

4부입니다. 이 블로그 게시물에서는 국제화에 대해 설명합니다.

부품 시리즈에 대한 빠른 링크:

1 부 -
2 부 -
파트 #3 -
PART #4 - i18next를 통한 국제화(본 게시물)
파트 #5 - styled-component의 고급 사용에 대한 기본 사항

어떤 단계에서든 막히면 Github repo을 참조하십시오.

완료된 프로젝트를 찾으려면 Demo link

React는 이 기능을 구현하기 위한 매우 쉬운 대안이 있으며 오늘은 그 중 하나인 i18next 플러그인을 만나보겠습니다.

Create React App으로 프로젝트 생성:

나는 종종(항상은 아니지만 😁) Create React App을 사용하여 내 React 프로젝트를 시작합니다.

프로젝트 실행을 생성하려면 다음을 수행하십시오.

npx create-react-app i18napp --template typescript

이미 프로젝트가 있거나 방금 생성한 경우 i18next가 제대로 작동하는 데 필요한 종속 항목을 설치합니다.

yarn add react-i18next i18next i18next-http-backend i18next-browser-languagedetector

자, 이제 우리는 이미 필요한 패키지를 가지고 있습니다. 코드를 손에 넣자!!!

i18next 구성

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

import Backend from "i18next-http-backend";

i18n
  .use(Backend)
  .use(initReactI18next)
  .init({
    lng: "en",
    fallbackLng: "en",
    debug: false,
    ns: "translation",
    defaultNS: "translation",
    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
      wait: false,
    },
  });

export default i18n;

그런 다음 다음과 같이 index.js로 가져와야 합니다.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import './i18n';

ReactDOM.render (
  <React.StrictMode>
    <Suspense fallback={<div>Loading...</div>}>
        <App />
    </Suspense>
  </React.StrictMode>,
  document.getElementById('root')
);

모든 설정, 반응 i18next가 활성화되고 사용할 준비가 되었습니다. 이제 다음 단계는 번역을 통합하는 것입니다.

이 프로젝트에서는 영어와 독일어를 통합합니다.

이를 위해/public 폴더에 두 개의 하위 폴더/en 및/pt가 있는/locales 폴더를 추가합니다. 둘 다 번역이 있는 개체를 포함하는 translation.json 파일이 있습니다.

번역 후크 가져오기

i18next 후크를 가져오려면 다음 코드를 사용합니다.

import React, { memo } from 'react';
import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { useTranslation } from "react-i18next";

const AuthorListView = memo(({ user }) => {
  const { picture, firstName, lastName, id } = user;
  const { t: translation  } = useTranslation();
  return (
    <CardContainer>
      <CardCoverImage src={picture} ></CardCoverImage>
      <CardHeading>{truncate(`${firstName} ${lastName}`)}</CardHeading>
      <CardFooterContainer>
        <CardLink>
          <Link className='nav-link' to={`/profile/${id}`}>
            { truncate(translation("viewAllPosts")) }
          </Link>
        </CardLink>
        <CardLink>
        <Link className='nav-link' to={`/profile/${id}`}>
        { truncate(translation("viewFullProfile")) }
          </Link>
        </CardLink>
      </CardFooterContainer>
    </CardContainer>
  );
});

export default AuthorListView;

마법이 일어난다