Magic Translate vs. react-intl

react-intl 는 FormatJS 의 일부야.ICU 메시지 구문으로 메시지, 날짜, 숫자를 포맷하고 각 언어에 대한 번역을 제공해.Magic Translate 는 컴포넌트의 텍스트를 직접 번역하므로 번역을 작성하거나 유지할 필요가 없어.

한 눈에

	Magic Translate	react-intl
텍스트 쓰는 방법	`<T>` 에 싸인 너의 말	아이디하고 기본 메시지 포함 `<FormattedMessage>`
번역들	자동 번역, 자동으로 생성돼.	메시지를 추출해서 번역해
메시지 파일들	아무 것도 없어.	언어당 파일 하나
날짜와 숫자	브라우저의 `Intl` API를 사용해.	내장 컴포넌트와 ICU 구문
서버 렌더링	리액트 서버 컴포넌트하고 Next.js	응, 추가 설정 필요
가격	무료 요금제, 그 다음에 사용량에 따른 월간 요금제	오픈 소스이고 무료야.

코드가 어떻게 다른지

react-intl 하면 각 메시지에 ID가 있고 번역은 별도의 파일에 있어.

import { FormattedMessage } from 'react-intl';

const Welcome = () => (
  <FormattedMessage id="home.welcome" defaultMessage="Welcome back!" />
);

// Then extract the messages, translate them for every language
// and load the right file when the app starts.

Magic Translate 쓰면 메시지를 한 번 써.

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

const Welcome = () => <T>Welcome back!</T>;

언제 고를까 Magic Translate

번역 워크플로 없이 여러 언어로 된 앱을 원해.
텍스트는 자주 바뀌고 모든 언어가 최신 상태여야 해.
돈을 지불하거나 번역가를 기다리지 않고도 새로운 언어를 원해.

언제 고를까 react-intl

복수형과 성별에 대한 ICU 메시지 구문이 필요해.
번역은 사람들이 쓰거나 리뷰해야 해.
외부 서비스 없는 무료 오픈 소스 라이브러리가 필요해.

둘 다 사용

둘 다 잘 어울려.react-intl 또는 Intl API를 사용하여 날짜, 숫자, 통화 형식을 지정하고 Magic Translate API를 사용하여 관련 텍스트를 번역해.

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