useTranslation

훅

@hua-labs/i18n-core

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

설치

Terminalbash

npm install @hua-labs/i18n-core

Importtsx

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

기본 사용법

tsx

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

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	docs:i18n.use-translation.returns.t
tPlural	(key: string, count: number, params?: Record<string, unknown>, language?: string) => string	docs:i18n.use-translation.returns.tPlural
tArray	(key: string, language?: string) => string[]	docs:i18n.use-translation.returns.tArray
currentLanguage	string	docs:i18n.use-translation.returns.currentLanguage
setLanguage	(lang: string) => void	docs:i18n.use-translation.returns.setLanguage
getRawValue	(key: string) => unknown	docs:i18n.use-translation.returns.getRawValue
isLoading	boolean	docs:i18n.use-translation.returns.isLoading
isInitialized	boolean	docs:i18n.use-translation.returns.isInitialized
error	Error \| null	docs:i18n.use-translation.returns.error
supportedLanguages	Array<{ code: string; name: string; nativeName: string }>	docs:i18n.use-translation.returns.supportedLanguages
debug	DebugAPI	docs:i18n.use-translation.returns.debug

코드 예시

docs:i18n.use-translation.examples.i18nexamplesgetrawvalue

tsx

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

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