← 개념

토큰 검색

"토큰 탐색"은 SDK가 UI를 작성하는 방식에서 번역이 필요한 대상을 자동으로 파악하는 방법입니다. 콘텐츠 형태에 따라 네 가지 구성 요소가 있습니다.

t() — 인라인 문자열

핵심 함수입니다. 원문 텍스트를 넘겨 호출하면 현재 로캘에 맞는 번역을 반환하며, 해당 로캘이 아직 준비되지 않았다면 원문 텍스트를 그대로 반환합니다. 선택 사항인 category는 관련된 문구를 묶어 주며 기계 번역기에 컨텍스트로 전달됩니다. params는 {placeholders}를 채웁니다.

const t = useT();

// t(phrase, category?, params?)
t('Hello, {name}!', 'Greetings', { name });

<Translate> — 콘텐츠 블록

마크업 영역을 감싸면 SDK가 이를 콘텐츠 블록으로 토큰화하고(각 텍스트 노드가 하나의 구문이 됩니다), 로케일이 바뀔 때마다 블록 전체를 다시 번역합니다. 블록은 콘텐츠와 카테고리에서 파생된 안정적인 id를 키로 사용하므로, 렌더링과 새로고침을 거쳐도 같은 블록으로 인식됩니다.

<Translate category="Home">
  <p>Welcome to our store. Browse the catalog in your language.</p>
</Translate>

<Phrase> — 마크업이 포함된 한 문장

문장에 인라인 마크업이나 보간이 포함되어 있으면 <Phrase>가 이를 하나의 번역 단위로 유지합니다. 그래서 "Hi Sarah, you have 3 items"가 조각나지 않고 하나의 자연스러운 문장으로 번역됩니다. 매개변수와 복수형 처리도 지원합니다.

<Phrase category="Cart" params={{ name: 'Sarah', count: 3 }}>
  Hi %name%, you have %count% items in your cart.
</Phrase>

<DontTranslate> — 그대로 두기

브랜드명, 코드, 식별자, 주소 등은 번역되지 않도록 영역을 지정하세요. translate="no"로 렌더링되며 탐색 대상에서 완전히 제외됩니다.

<p>Welcome! <DontTranslate>This sentence always stays in English.</DontTranslate> Thanks for visiting!</p>