문서: 고급 사용법 – 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 프로바이더를 사용하는 것을 강력히 권장합니다. 이렇게 하면 번역과 문자열을 헤더, 푸터 또는 특정 섹션과 같은 서로 다른 오리진으로 구성하는 데 유용합니다.

오리진 활용에 대해 더 알아보려면 여기를 확인하세요.

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

모범 사례