문서: 고급 사용법 – 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>
	);
}

현재 언어를 React 외부에서 확인하기 위해 제공된 isRightToLeftLocaleCode 함수를 사용할 수도 있습니다.

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

원본(origin) 또는 로케일(locale) 재정의하기

여러 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”로 번역될 수 있습니다.

모범 사례