번역 키 없이 i18n을 반응해.

대부분의 React i18n 라이브러리는 번역 키로 작동해.앱의 모든 텍스트를 키로 바꾸고, 언어별 번역 파일을 보관하고, 런타임에 올바른 텍스트를 찾아봐.Magic Translate 모두 건너뛰어. 모국어로 텍스트를 작성하면 페이지가 표시될 때 번역돼.

i18n (번역 키 포함) 작동 원리

키 기반 라이브러리에서 간단한 버튼은 다음과 같아.

// en.json
{ "checkout.button": "Continue to payment" }

// de.json
{ "checkout.button": "Weiter zur Zahlung" }

// Checkout.tsx
<button>{t('checkout.button')}</button>

모든 새 텍스트는 새 키, 모든 언어 파일의 항목, 각 언어의 번역을 의미해.영어 텍스트를 변경하면 다른 언어는 누군가 다시 번역하기 전까지는 구식이야.

키 없는 같은 버튼

Magic Translate 하면 텍스트가 그대로 있어.

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

<button>
  <T>Continue to payment</T>
</button>

유지할 언어 파일이 없어.텍스트를 변경하면 새 버전이 다음에 표시될 때 번역되고 그때부터 번역이 캐시돼.

시작하기

Magic Translate 가입하고 API 키 받아.무료 요금제는 월 5,000자 포함돼.
리액트 가이드에 있는 것처럼 클라이언트를 설치하고 앱을 MagicTranslateProvider 안에 래핑해.
텍스트 줄 바꿈은 <T>.props 및 속성의 경우 useT hook 써.

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

const App = () => (
  <MagicTranslateProvider apiKey="<your-api-key>" language={Language.FR}>
    <h1>
      <T>Welcome to our shop</T>
    </h1>
  </MagicTranslateProvider>
);

서버에서 렌더링하는 경우 대신 React SSR을 사용해. 그러면 검색 엔진과 사용자가 완전히 번역된 HTML을 얻을 수 있어.

번역 키가 여전히 더 나은 선택일 때

기계 번역은 좋은데 사람이 리뷰는 안 해.법률 문서나 의학 문서처럼 앱의 모든 단어가 번역가의 승인을 받아야 하는 경우 사람이 번역하는 키 기반 라이브러리에서 제어할 수 있어.많은 앱이 이 둘을 결합해. 대부분의 인터페이스에 Magic Translate 사용하고 중요한 부분에서는 리뷰 텍스트를 사용했어.

자주 묻는 질문

번역이 충분히 빠른가?

텍스트를 처음 번역하는 데 몇 초 걸릴 수 있어.그 후에는 캐시되고 100~300밀리초가 걸려.React SSR에서는 번역이 서버에서 이루어지므로 사용자는 기다릴 필요가 없어.

비용은 얼마나 들까?

사용량은 월별 번역된 문자로 계산되고 이미 번역된 텍스트는 다시 집계되지 않아.사용량 계산 방법과 가격 보기.

어떤 언어가 지원돼?

70세 이상이야.지원되는 언어 전체 목록 보기.