로캘 스토어

Langsys의 모든 반응형 동작은 현재 로케일을 담은 스토어라는 작은 상태 하나에서 출발합니다. 이 값을 설정하면 트리 안의 모든 번역이 다시 렌더링됩니다. 새로고침도, 경로 변경도 필요 없습니다.

시청 · 0:36 로캘 스토어

하나의 스토어로 모든 것을 제어합니다

LangsysApp.init()에 UserLocaleStore를 전달합니다. 이는 로케일 문자열을 담고 있는 반응형 값으로, 사용하는 프레임워크에서 반응형이라고 부르는 것이면 무엇이든 됩니다. Langsys 시그널, Svelte writable, Vue ref 등이 해당합니다. 여기에 값을 쓰면 SDK가 모든 t(), <Translate>, <Phrase>를 새 로케일에 맞춰 다시 처리합니다.

import { LangsysApp, createLocaleStore } from 'langsys-js-react';

const locale = createLocaleStore('en-US');   // one reactive store

await LangsysApp.init({
  projectid,
  key,                    // read-only in the browser
  UserLocaleStore: locale,
});

// Later — anywhere in the app:
locale.set('es-ES');      // every t(), <Translate>, <Phrase> re-renders

각 프레임워크가 기본적으로 읽습니다

리액티브 처리 방식은 프레임워크마다 다르지만 모델은 동일합니다. 활성 로케일에 대한 단일 기준 소스를 이미 사용 중인 관용 방식으로 노출합니다.

// React    — a hook returns the current t, re-rendering on change
const t = useT();

// Vue      — a composable ref, auto-unwrapped in templates
const t = useT();

// Svelte   — a store, auto-subscribed with $
$t('Hello, {name}!', 'Greetings', { name });

전환하면 그 자리에서 다시 번역됩니다

스토어가 변경되면 SDK는 새 로케일의 카탈로그를 가져오고(페이지 새로고침 없이 요청 한 번), 도착하면 모든 항목을 다시 번역합니다. 그때까지는 페이지가 표시 중이던 언어를 유지하므로 원문으로 되돌아가는 일은 없습니다.

보간 및 복수형

시청 · 1:14 복수형 처리

Params는 {placeholders}를 채웁니다. 개수가 포함된 문장은 코드에서 단순한 형태로 유지됩니다. Langsys가 번역 중에 각 언어의 복수형을 생성하고, SDK는 렌더링 시점에 활성 로캘에 맞는 분기를 표시합니다.

t('You have {count} items', 'Cart', { count });

// You write that one flat sentence. Langsys generates each locale's plural
// forms during translation, and the SDK renders the branch your count matches:
// en → "1 item" / "3 items"   ·   es → "1 artículo" / "3 artículos"

나란히 비교의 비결. 모든 바인딩은 하나의 공통 langsys-js-typescript 코어에 위임하므로, 하나의 스토어로 React, Vue, Svelte를 동시에 구동할 수 있습니다. 비교 데모가 하나의 전환기로 세 가지를 완벽하게 동기화하는 방식이 바로 이것입니다.

직접 체험해 보세요. 인터랙티브 플레이그라운드에서 문구와 매개변수를 편집하고, 로케일을 바꾸고, 실제 SDK가 다시 번역하는 모습을 확인할 수 있습니다.