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

번역 비활성화

문자열의 특정 부분에 대한 번역을 비활성화하거나 특정 구간을 있는 그대로 유지하려면 triple square brackets를 사용할 수 있습니다. 이 기능은 이름, 기술 용어 또는 번역되지 않아야 하는 기타 콘텐츠의 원래 형식을 유지하는 데 유용합니다.

import {Translate} from 'tacotranslate/react';

function Component() {
	return (
		<Translate string="Hello, [[[TacoTranslate]]]!" />
	);
}

이 예제에서 “TacoTranslate”라는 단어는 번역되지 않고 그대로 유지됩니다.

여러 TacoTranslate 공급자

앱에서 여러 개의 TacoTranslate 공급자를 사용하는 것을 적극 권장합니다. 이것은 번역과 문자열을 헤더, 푸터 또는 특정 섹션과 같은 서로 다른 출처로 구성하는 데 유용합니다.

여기에서 origins 활용에 대해 더 읽어보실 수 있습니다.

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

최선의 방법