고급 사용법
오른쪽에서 왼쪽으로 쓰는 언어 처리
TacoTranslate는 React 애플리케이션에서 아랍어 및 히브리어와 같은 오른쪽에서 왼쪽으로 읽는(RTL) 언어를 쉽게 지원할 수 있게 해줍니다. RTL 언어를 적절히 처리하면 오른쪽에서 왼쪽으로 읽는 사용자에게 콘텐츠가 올바르게 표시됩니다.
import {useTacoTranslate} from 'tacotranslate/react';
function Document() {
const {locale, isRightToLeft} = useTacoTranslate();
return (
<html lang={locale} dir={isRightToLeft ? 'rtl' : 'ltr'}>
<body>
// ...
</body>
</html>
);
}
또한 제공된 isRightToLeftLocaleCode
함수를 사용하여 React 외부에서 현재 언어를 확인할 수 있습니다.
import {isRightToLeftLocaleCode} from 'tacotranslate';
function foo(locale = 'es') {
const direction = isRightToLeftLocaleCode(locale) ? 'rtl' : 'ltr';
// ...
}
번역 비활성화
문자열의 특정 부분에 대한 번역을 비활성화하거나 특정 구간을 있는 그대로 유지하려면 삼중 대괄호를 사용할 수 있습니다. 이 기능은 이름, 기술 용어 또는 번역하면 안 되는 기타 콘텐츠의 원래 형식을 유지하는 데 유용합니다.
import {Translate} from 'tacotranslate/react';
function Component() {
return (
<Translate string="Hello, [[[TacoTranslate]]]!" />
);
}
이 예제에서 단어 “TacoTranslate”은 번역에서 변경되지 않고 그대로 유지됩니다.
여러 TacoTranslate 제공자
앱에서 여러 TacoTranslate
프로바이더를 사용하는 것을 강력히 권장합니다. 이는 번역 및 문자열을 헤더, 푸터 또는 특정 섹션과 같은 서로 다른 오리진으로 구성하는 데 유용합니다.
오리진 활용에 대해 자세히 알아보시려면 여기를 클릭하세요.
TacoTranslate
제공자는 상위 제공자의 설정을 상속하므로 다른 설정을 반복해서 입력할 필요가 없습니다.
import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate} from 'tacotranslate/react';
const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});
function Header() {
return (
<TacoTranslate origin="header">
// ...
</TacoTranslate>
);
}
function Menu() {
return (
<TacoTranslate origin="menu">
// ...
</TacoTranslate>
);
}
export default function App() {
return (
<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
<Header />
<Menu />
</TacoTranslate>
);
}
오리진 또는 로케일 재정의
여러 TacoTranslate
제공자를 사용하는 것 외에도, Translate
컴포넌트 및 useTranslation
훅 수준에서 origin과 locale을 모두 재정의할 수 있습니다.
import {Translate, useTranslation} from 'tacotranslate/react';
function Greeting() {
const spanishHello = useTranslation('Hello!', {locale: 'es'});
return (
<>
{spanishHello}
<Translate string="What’s up?" origin="greeting" />
</>
);
}
로딩 처리
클라이언트 측에서 언어를 변경하면 사용자 연결 상태에 따라 번역을 불러오는 데 잠시 시간이 걸릴 수 있습니다. 전환 중에 시각적 피드백을 제공하는 로딩 표시기를 표시하면 사용자 경험을 향상시킬 수 있습니다.
import {useTacoTranslate} from 'tacotranslate/react';
function Component() {
const {isLoading} = useTacoTranslate();
return (
isLoading ? 'Translations are loading...' : null
);
}
복수화
다른 언어에서 복수형 처리와 개수 기반 레이블을 올바르게 표시하려면, 이는 모범 사례로 간주됩니다:
import {Translate, useLocale} from 'tacotranslate/react';
function PhotoCount() {
const locale = useLocale();
const count = 1;
return count === 0 ? (
<Translate string="You have no photos." />
) : count === 1 ? (
<Translate string="You have 1 photo." />
) : (
<Translate
string="You have {{count}} photos."
variables={{count: count.toLocaleString(locale)}}
/>
);
}
다국어
동일한 애플리케이션에서 여러 언어를 동시에 지원하려면, 여러 TacoTranslate 프로바이더를 사용하여 아래와 같이 서로 다른 locale
값을 지정할 수 있습니다:
또한 locale
를 컴포넌트 또는 훅 수준에서 재정의할 수 있습니다.
import createTacoTranslateClient from 'tacotranslate';
import {TacoTranslate, Translate} from 'tacotranslate/react';
const tacoTranslateClient = createTacoTranslateClient({apiKey: 'YOUR_API_KEY'});
function Spanish() {
return (
<TacoTranslate locale="es">
<Translate string="Hello, world in Spanish!" />
</TacoTranslate>
);
}
function Norwegian() {
return (
<TacoTranslate locale="no">
<Translate string="Hello, world in Norwegian!" />
</TacoTranslate>
);
}
export default function App() {
return (
<TacoTranslate client={tacoTranslateClient} origin="page" locale="es">
<Spanish />
<Norwegian />
</TacoTranslate>
);
}
번역 ID 사용
동일한 문자열에 대해 서로 다른 번역이나 의미를 처리하려면 id
를 Translate
컴포넌트에 추가할 수 있습니다. 이 기능은 동일한 텍스트가 문맥에 따라 다른 번역을 필요로 할 때 특히 유용합니다. 고유한 ID를 할당하면 문자열의 각 인스턴스가 해당하는 특정 의미에 따라 정확하게 번역되도록 보장합니다.
import {Translate} from 'tacotranslate/react';
function Header() {
return (
<Translate id="header" string="Login" />
);
}
function Footer() {
return (
<Translate id="footer" string="Login" />
);
}
예를 들어, 헤더의 로그인은 스페인어로 “Iniciar sesión”로 번역될 수 있고, 푸터의 로그인은 스페인어로 “Acceder”로 번역될 수 있습니다.