<T> 컴포넌트

콘텐츠를 <T> 구성 요소로 묶어 번역해.

<T>This content will be translated</T>

Props

변수들

이름이나 개수처럼 변경되는 값을 v() 안에 래핑해.

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

<T>
  Hello {v(user.name)}, you have {v(count)} unread messages
</T>

Magic Translate 는 값 주위의 텍스트를 Hello {0}, you have {1} unread messages 으로 한 번 번역하고 값을 앱에 다시 넣어.번역은 캐시되어 모든 이름, 모든 개수에 적용되고 값 자체는 Magic Translate 로 전송되지 않아.

값은 표시된 순서대로 번호가 매겨져 있어.번역은 언어에 필요한 곳 어디든 옮길 수 있어. 예를 들어 {1} ungelesene Nachrichten für {0}.

v() 에는 링크 같은 리액트 컴포넌트도 담을 수 있어.

<T>
  Read our {v(<Link href="/terms">terms</Link>)} before you continue.
</T>

그럼 링크 텍스트는 번역되지 않았어.그것도 번역하려면 그 자체로 <T>: v(<Link href="/terms"><T>terms</T></Link>) 안에 넣어.

v() 없으면 값이 주위의 텍스트와 함께 번역돼.효과가 있긴 한데, 값이 다를 때마다 사용량에 반영되는 별도의 번역이야.

한계

1. 리액트 컴포넌트는 <T> 컴포넌트 안에 넣을 수 없어, v() 내부 외에는.일반 HTML 요소는 괜찮아 (아래 예 참조).
2. <T> 구성 요소 내의 콘텐츠는 10KB, 즉 약 5,000자를 초과할 수 없어.

{/* this is OK, since <a> is a plain HTML element */}
<T>
  <a href="mailto:info@i42.ch">Please send us an email</a>
</T>

{/* this does NOT work, since <MyButton> is a React component */}
<T>
  <MyButton>Click me</MyButton>
</T>