문서화

그 useT hook

useT hook 써서 props 문자열과 속성 (예: 버튼 aria-label) 을 번역해.

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


const MyComponent = () => {
  const t = useT();


  return (
    <button aria-label={t('Main menu')}>
      <HamburgerIcon />
    </button>
  );
};

구성 요소 내부 어디에서나 t() 함수를 사용할 수 있어.원한다면 마크업에서 <T> 컴포넌트 대신 사용할 수도 있어.

const MyComponent = () => {
  const t = useT();


  return <p>{t('This will be translated')}</p>;
};

변수들

이름이나 개수 같은 값을 문자열에 넣으려면 괄호 없이 t 태그가 지정된 템플릿으로 호출해.

const MyComponent = ({ count }: { count: number }) => {
  const t = useT();


  return <p>{t`You have ${count} unread messages`}</p>;
};

Magic Translate 는 You have {0} unread messages 한 번 번역하고 값을 앱에 다시 넣어서 카운트당 하나의 캐시된 번역이 작동해.값은 Magic Translate 로 절대 전송되지 않아.이것은 <T> 구성 요소의 v() 하고 같아.

옵션들

t() 에도 <T> 구성 요소와 동일한 옵션을 전달할 수 있어, 예를 들어 formality.

const MyComponent = () => {
  const t = useT();


  return <button>{t('Please click here', { formality: 'formal' })}</button>;
};

여기에는 id 포함돼. 이 텍스트 사용을 자체적으로 편집하기 위한 거야.

<button aria-label={t('Save', { id: 'checkout-save' })} />

태그가 붙은 템플릿에는 옵션이 없어.변수와 id 둘 다 있는 텍스트의 경우 <T> 구성 요소 써.

이전<T> 컴포넌트다음리액트 서버 컴포넌트