React 기반 국제화를 위한 i18next 활용

국제화(i18n)는 소프트웨어의 글로벌 시장 도달 범위를 확장하는 데 필수적입니다. JavaScript 생태계에서 이를 위한 가장 효과적인 도구 중 하나는 i18next입니다. 이 글에서는 i18next, 특히 React와의 통합을 살펴보고 장점, 다양한 프레임워크와의 호환성 및 지역화 노력을 향상시키는 팁을 강조합니다.

i18next란 무엇일까요?

i18next는 JavaScript 애플리케이션을 위한 강력한 국제화 프레임워크입니다. 웹, 모바일 및 데스크톱 애플리케이션에 다국어 지원을 쉽게 추가할 수 있습니다. 이 프레임워크는 동적 번역 관리를 가능하게 하여 애플리케이션을 다양한 언어와 지역에 맞게 쉽게 적응할 수 있도록 합니다.

i18next의 장점

• 통합의 용이성

i18next는 기존 프로젝트에 쉽게 통합될 수 있으며 React, Angular, Vue와 같은 인기 있는 JavaScript 프레임워크를 지원합니다. 이러한 다재다능함은 개발자들에게 i18next를 선호하는 선택으로 만들어줍니다.

• 사용자 지정 및 유연성

i18next는 개발자가 필요한 기능만 사용할 수 있도록 모듈식 구조를 제공합니다. 이러한 높은 수준의 사용자 지정을 통해 프레임워크는 광범위한 프로젝트 요구 사항에 맞출 수 있습니다.

• 번역의 동적 로딩

프레임워크는 번역의 동적 로딩을 지원하여 필요한 언어 리소스만 요청 시 가져오므로 성능을 최적화합니다.

• 복수형 및 문맥화

i18next는 복수형 및 문맥화 처리를 위한 기본 지원 기능을 포함하고 있어 수량 또는 문맥에 따라 정확한 언어 변형을 보장합니다.

• 다양한 파일 형식 지원

• 다양한 파일 형식 지원

JSON 및 YAML을 포함한 여러 파일 형식을 지원하여 번역을 저장하므로 프로젝트 요구 사항에 가장 적합한 형식을 유연하게 선택할 수 있습니다.

• 풍부한 생태계

번창하는 커뮤니티와 풍부한 생태계는 플러그인, 확장 및 지원을 제공하여 i18next의 기능을 향상시키고 확장하여 개발 시간과 노력을 절약합니다.

• 다양한 백엔드 옵션

i18next는 인메모리, HTTP, 사용자 정의 백엔드와 같은 다양한 백엔드를 지원하여 번역을 저장하고 검색하므로 다양한 저장 솔루션과의 통합이 가능합니다.

• 활발한 개발 및 유지 관리

정기적인 업데이트 및 개선은 i18next를 웹 개발의 모범 사례와 진화하는 요구 사항과 최신 상태로 유지합니다.

React-i18next 통합

i18next의 가장 인기 있는 통합 중 하나는 react-i18next 바인딩을 통한 React와의 통합입니다. 이 조합은 React 구성 요소 내에서 효율적인 국제화를 가능하게 하여 동적 언어 전환과 원활한 번역 관리를 용이하게 합니다.

i18next 인스턴스를 설정하고 필요한 옵션으로 초기화하여 React 애플리케이션(nextjs)에서 i18next를 구성합니다.

React-i18next 예제 코드

다음은 React 애플리케이션에서 react-i18next를 설정하고 사용하는 단계별 예입니다.

1. 종속성 설치

먼저 서버에서 번역을 로드하기 위해 i18next, react-i18next 및 next-i18next를 설치합니다.

npm install i18next react-i18next next-i18next

2. i18next 초기화

next-i18next.config.js 파일을 만들어 i18next를 구성하고 초기화합니다.

// next-i18next.config.js
const path = require('path'); // 이 줄을 추가하여 path를 정의합니다
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en'],  // 여기에 언어를 추가합니다
    // localeDetection: false,  // 기본값은 true
  },
  localePath: path.resolve('./content/locales'),  // 여기에 i18n 파일 경로를 지정합니다 
  // ns: ['common','componentFeature'],
  languageNames: {
    'en': 'English',
  },
}

// next.config.js
const { i18n } = require('./next-i18next.config')
module.exports = {
  reactStrictMode: true,
  async redirects() {
    return [

    ];
  },
  i18n,  // 이 i18n 구성을 추가합니다
};

3. 번역 파일 설정

각 언어(en, de 등)에 대한 하위 디렉토리가 있는 locales 디렉토리를 만듭니다. 각 하위 디렉토리 내에서 translation.json 파일을 만듭니다.

예:

-content
  -locales
    -en
      -translation.json
      -'other file if you have'.json
    -de
      -translation.json
      -'other file if you have'.json

locales/en/translation.json

{
  "welcome": "Welcome",
  "description": "This is a sample description."
}

locales/de/translation.json

{
  "welcome": "Willkommen",
  "description": "Dies ist eine Beispielbeschreibung."
}

4. I18nextProvider로 앱 감싸기

index.js, App.js 또는 _app.tsx 파일과 같은 메인 파일에서 appWithTranslation으로 애플리케이션을 감싸세요.

import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    ...
  );
}

export default appWithTranslation(MyApp)  // 이렇게 감싸세요 

5. 컴포넌트에서 번역 후크 사용하기

이제 useTranslation 후크를 사용하여 컴포넌트에서 문자열을 번역할 수 있습니다.

먼저 페이지 레벨 파일에서 serverSideTranslations를 사용해야 합니다.

export const getStaticProps: GetStaticProps = async ({ }) => {
  return {
    props: {
      ...(await serverSideTranslations(safeLocale, [
        'translation', 'other'
      ])),
    },
  };
};
export default function Price() {
      return (
        <div>
          <yourComponent/>
        </div>
    )
}

그리고 컴포넌트에서

import React from 'react';
import { useTranslation } from 'next-i18next';

const MyComponent = () => {
  const { t } = useTranslation('translation', 'other');  // translation은 여기서 기본값입니다.

  return (
    <div>
      <h1>{t('welcome')}</h1>
      <p>{t('description')}</p>
      <p>{t('other:yourcontent')}</p> // 다른 네임스페이스 사용
    </div>
  );
};

export default MyComponent;