@lingo.dev/react

@lingo.dev/react은 React 앱 번역을 위한 가벼운 런타임 라이브러리입니다. JSONC 로캘 파일에서 번역을 불러오고, 안정적인 콘텐츠 해시로 조회하며, ICU plural/select 지원과 로캘 인식 숫자, 날짜, 목록, 파일 크기 포맷팅을 통해 문자열은 물론 풍부한 React 트리까지 렌더링합니다.

이 라이브러리에는 자체 빌드 단계가 없습니다. l.text("Hello")를 작성하면 CLI가 lingo extract 중에 이를 추출하고, 번역된 문자열은 같은 해시로 런타임에서 불러옵니다. 번역이 없으면 원문 텍스트가 폴백으로 렌더링됩니다.

여기서 다루는 것은 런타임입니다. 추출과 번역 푸시를 위한 @lingo.dev/cli, 그리고 Next.js 바인딩을 위한 @lingo.dev/react-next는 각각 별도 패키지로 제공됩니다.

설치#

bash

npm install @lingo.dev/react

한눈에 보기#

tsx

import { LingoProvider, useLingo } from "@lingo.dev/react";
import esMessages from "./locales/es.json";

export function App() {
  return (
    <LingoProvider locale="es" messages={esMessages}>
      <Greeting name="Ada" />
    </LingoProvider>
  );
}

function Greeting({ name }: { name: string }) {
  const l = useLingo();
  return <p>{l.text("Hello, {name}!", { values: { name }, context: "Hero greeting" })}</p>;
}

일반적인 사용에 필요한 API는 이게 전부입니다. 앱을 한 번 감싸고, 어떤 컴포넌트에서든 useLingo()를 호출하면 훅이 .text(), .rich(), 복수형, 포맷터, 그리고 현재 로캘 메타데이터를 담은 Lingo 객체를 반환합니다.

이 섹션에서 다루는 내용#

Quickstart

설치하고, 첫 번역을 작성하고, `lingo extract`를 실행한 뒤, 실제로 렌더링되는 모습을 확인해 보세요.

LingoProvider

컨텍스트 프로바이더입니다. 병합 방식, 언제 중첩해야 하는지, 메시지가 어떤 형태여야 하는지 설명합니다.

useLingo

훅입니다. 문자열에는 `text()`, React 트리에는 `rich()`를 쓰는 방법과 각각 언제 써야 하는지 살펴봅니다.

복수형과 select

ICU plural 및 select 형식 — MessageFormat으로 컴파일되는 친숙한 API입니다.

포맷팅

숫자, 통화, 백분율, 날짜, 상대 시간, 목록, 파일 크기까지 — 모두 네이티브 Intl로 처리합니다.

이 페이지가 도움이 되었나요?

설치#