국제화

@lh-ui/react의 모든 텍스트는 @lh-ui/share/locales에서 오며, 이 라이브러리는 어떤 텍스트 사본도 갖지 않습니다.

언어 패

내장된 두 언어 패는 패키지 진입점에서 바로 가져올 수 있습니다:

import { zhCN, enUS } from '@lh-ui/react'

언어 패	locale 값
zhCN	zh-CN (기본값)
enUS	en-US

ConfigProvider로 전환

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider locale="en-US">
      <YourApp />
    </LhConfigProvider>
  )
}

LhConfigProvider는 내부적으로 useEffect에서 lhlocale.setLocale(locale)을 호출해 전역에 적용합니다(명령형 서비스 message 등 포함).

컴포넌트에서 읽기

useLhLocale()로 번역 함수를 가져옵니다:

import { useLhLocale } from '@lh-ui/react'

function Demo() {
  const { t, tm, getLocale } = useLhLocale()

  return (
    <>
      <p>현재 언어: {getLocale()}</p>
      <p>{t('input.placeholder')}</p>
      {/* t의 두 번째 매개변수는 동적 보간입니다 */}
      <p>{t('form.required', '이 항목은 필수입니다')}</p>
    </>
  )
}

메서드	설명
t(path, fallbackOrParams?)	번역. 두 번째 매개변수가 문자열이면 폴백, 객체면 보간으로 사용. 모두 비워두면 경로 원문으로 폴백
tm(path)	원시 메시지 가져오기(배열 형태의 항목)
getLocale()	현재 locale 값
version	언어 패 버전 번호(내부적으로 다시 렌더링을 유도하는 데 사용)

반응형 업데이트

useLhLocale은 useSyncExternalStore로 share의 전역 locale 싱글톤을 구독합니다: 어디서든 lhlocale.setLocale()을 호출하면, 이를 소비하는 모든 컴포넌트가 자동으로 다시 렌더링됩니다.

import { lhlocale } from '@lh-ui/react'

// 명령형 전환 (ConfigProvider를 거치지 않을 때)
lhlocale.setLocale('en-US')

언어 패 확장

언어 패는 평범한 객체이므로, 직접 확장한 뒤 LhConfigProvider에 전달할 수 있습니다. 키의 계층 구조는 zhCN을 참조하세요.

SSR

useSyncExternalStore의 서버 스냅샷과 클라이언트 스냅샷은 모두 version이므로, 서버 측에서 구독으로 인해 하이드레이션 불일치가 발생하지 않습니다.