번역 키 없이 i18n을 반응해.

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

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을 얻을 수 있어.

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

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

자주 묻는 질문

번역이 충분히 빠른가?

첫 번역은 몇 초 걸릴 수 있어.그 후에는 캐시되고 100~300밀리초가 걸려.React SSR을 사용하면 번역이 서버에서 이루어지므로 사용자는 이미 번역된 페이지를 받게 돼.

비용은 얼마나 들까?

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

어떤 언어가 지원돼?

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