문서: 고급 사용법 – TacoTranslate

고급 사용법

Korean

오른쪽에서 왼쪽으로 쓰는 언어 처리

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 프로바이더를 사용하는 것을 강력히 권장합니다. 이는 헤더, 푸터 또는 특정 섹션과 같은 서로 다른 origin(출처)으로 번역과 문자열을 정리하는 데 유용합니다.

자세한 내용은 오리진 활용에 대해 더 읽어보세요.

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)}}
		/>
	);
}

다국어

같은 애플리케이션 내에서 여러 언어를 동시에 지원하려면, 아래에 표시된 것처럼 서로 다른 locale 값을 가진 여러 TacoTranslate 프로바이더를 사용할 수 있습니다:

또한 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 사용

동일한 문자열에 대해 다른 번역이나 의미를 처리하려면 Translate 컴포넌트에 id를 추가할 수 있습니다. 이는 동일한 텍스트가 문맥에 따라 서로 다른 번역을 필요로 할 때 특히 유용합니다. 고유한 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”로 번역될 수 있습니다.

모범 사례