useTranslation

훅

@hua-labs/hua

번역 기능을 제공하는 핵심 훅입니다. namespace:key 형식으로 번역 텍스트를 가져오고, 보간 변수를 지원합니다.

설치

Terminalbash

npm install @hua-labs/hua

Importtsx

import { useTranslation } from '@hua-labs/hua';

기본 사용법

tsx

import { useTranslation } from '@hua-labs/hua';

function MyComponent() {
  const { t, currentLanguage } = useTranslation();

  return (
    <div>
      <h1>{t('common:welcome')}</h1>
      <p>{t('common:greeting', { name: 'HUA' })}</p>
      <span>Current: {currentLanguage}</span>
    </div>
  );
}

라이브 데모

언어 전환

번역 결과

t("common:actions.save"): 저장

t("common:actions.cancel"): 취소

currentLanguage:

API 레퍼런스

반환값


t	(key: string, paramsOrLang?: Record<string, unknown> \| string, language?: string) => string	Unified translation function: t(key), t(key, lang), t(key, params), t(key, params, lang)
tPlural	(key: string, count: number, params?: Record<string, unknown>, language?: string) => string	ICU plural translation using Intl.PluralRules (e.g., '1 item' vs '3 items')
tArray	(key: string, language?: string) => string[]	Get translation value as string array (type-safe)
currentLanguage	string	Current active language code
setLanguage	(lang: string) => void	Change the current language
getRawValue	(key: string) => unknown	Get raw translation value (for arrays/objects)
isLoading	boolean	Whether translations are being loaded
isInitialized	boolean	Whether the i18n system is initialized
error	Error \| null	Error object if translation loading failed
supportedLanguages	Array<{ code: string; name: string; nativeName: string }>	List of supported languages
debug	DebugAPI	Debug utilities for development

코드 예시

i18n:examples.getRawValue

tsx

// getRawValue로 배열/객체 번역 데이터 가져오기
import { useTranslation } from '@hua-labs/hua';

function Navigation() {
  const { getRawValue } = useTranslation();

  // 문자열 배열 가져오기
  const items = getRawValue('legal:items') as string[] || [];

  // 객체 배열 가져오기
  interface NavLink { label: string; href: string; }
  const links = getRawValue('nav:links') as NavLink[] || [];

  return (
    <nav>
      {links.map((link, i) => (
        <a key={i} href={link.href}>{link.label}</a>
      ))}
    </nav>
  );
}

사용 사례

다국어 UI

버튼, 라벨, 메시지 등 UI 요소를 여러 언어로 표시

동적 콘텐츠

변수를 포함한 동적 메시지 생성

폼 유효성 검사

다국어 유효성 검사 메시지 표시

에러 메시지

사용자 친화적인 다국어 에러 메시지

SSR Translations useLanguageChange