Magic Translate vs. i18next

리액트 바인딩 react-i18next 있는 i18next, 자바스크립트용 가장 인기 있는 오픈소스 i18n 라이브러리야.번역 키와 언어 파일을 중심으로 구축돼.Magic Translate 는 키나 파일 없이 컴포넌트의 텍스트를 직접 번역해.이 페이지에서는 차이점을 설명하므로 앱에 적합한 도구를 선택할 수 있어.

한 눈에

코드가 어떻게 다른지

react-i18next 하면 각 언어의 언어 파일을 보관하고 키로 텍스트를 참조해.

// locales/en/translation.json
{ "cart": { "title": "Your shopping cart" } }

// Cart.tsx
import { useTranslation } from 'react-i18next';

const Cart = () => {
  const { t } = useTranslation();
  return <h2>{t('cart.title')}</h2>;
};

Magic Translate 사용하면 텍스트가 구성 요소에 남아 있어.

import { T } from '@magic-translate/react';

const Cart = () => (
  <h2>
    <T>Your shopping cart</T>
  </h2>
);

언제 고를까 Magic Translate

• 언어 파일을 관리하지 않고 여러 언어로 된 앱을 원해.
• 번역가가 없거나 새 버전을 출시하기 전에 번역기를 기다리고 싶지 않은 거야.
• 텍스트는 자주 바뀌고 모든 언어가 최신 상태여야 해.
• 리액트 서버 컴포넌트나 Next.js 쓰는데 검색 엔진용으로 완전히 번역된 HTML을 원해.

언제 고를까 i18next

• 모든 텍스트는 사람이 번역하거나 리뷰해야 해.
• 각 언어의 복수형, 날짜, 숫자를 정확하게 제어해야 해.
• 외부 서비스 없는 무료 오픈 소스 라이브러리가 필요해.

i18next 에서 Magic Translate 으로 이동 중

한 번에 구성 요소 하나씩만 전환할 수 있어.t('key') 를 언어 파일의 영어 텍스트 (<T> 포장) 로 바꾸거나 props 및 속성에 useT hook 를 써.마이그레이션하는 동안 두 라이브러리를 나란히 실행할 수 있어.

해볼 준비가 됐어?시작 안내서에 따라 5분 만에 첫 번째 구성 요소를 번역해.