|Labs
데모 예약플랫폼
React (Lingo Compiler)
알파
React (MCP)React (i18n)
레거시 CLI (v0)
사용 중단

개요

  • @lingo.dev/react

시작하기

  • 빠른 시작

레퍼런스

  • LingoProvider
  • useLingo
  • 복수형과 select
  • 포맷팅

포맷팅

모든 Lingo 인스턴스에는 현재 활성 로캘에 맞춰 동작하는 포맷팅 메서드 세트가 포함되어 있습니다. 네이티브 Intl.* API를 얇게 감싼 래퍼라서 번들 크기가 늘어나지 않고, LingoProvider에 이미 전달한 로캘 문자열 외에는 별도의 고정된 기본값도 없습니다.

모든 메서드는 순수 함수입니다. 같은 입력과 같은 로캘을 넘기면 항상 같은 결과를 반환합니다. 그래서 메모이제이션 없이 render 내부에서 호출해도 안전합니다.

숫자#

l.num(value, options?)#

로캘에 맞는 자릿수 구분과 소수점 형식으로 숫자를 포맷합니다.

tsx
l.num(1234567);       // "1,234,567" (en) / "1.234.567" (de) / "1 234 567" (fr)
l.num(3.14159, { maximumFractionDigits: 2 }); // "3.14" (en) / "3,14" (de)

options는 Intl.NumberFormat에 그대로 전달됩니다.

l.currency(value, code, options?)#

tsx
l.currency(29.99, "USD");   // "$29.99" (en) / "29,99 $US" (fr)
l.currency(29.99, "EUR");   // "€29.99" (en) / "29,99 €" (de)

l.percent(value, options?)#

15.6이 아니라 0.156처럼 소수값을 전달하세요.

tsx
l.percent(0.156);                           // "16%" (en) / "16 %" (fr)
l.percent(0.156, { maximumFractionDigits: 1 }); // "15.6%"

l.unit(value, unit, options?)#

unit에는 Intl이 인식하는 단위 이름을 사용합니다(celsius, kilometer-per-hour, megabyte 등).

tsx
l.unit(32, "celsius");        // "32°C" (en) / "32 °C" (de)
l.unit(120, "kilometer-per-hour"); // "120 km/h"

l.compact(value, options?)#

tsx
l.compact(1234567);    // "1.2M" (en) / "123万" (ja) / "1,2 Mio." (de)
l.compact(950);        // "950"

날짜와 시간#

l.date(value, options?) / l.time / l.datetime#

Date 또는 epoch 밀리초를 받을 수 있습니다.

tsx
l.date(new Date());     // "3/16/2026" (en) / "16.03.2026" (de)
l.time(new Date());     // "3:45 PM" (en) / "15:45" (de)
l.datetime(new Date()); // "3/16/2026, 3:45 PM" (en)

l.date(now, { dateStyle: "long" });   // "March 16, 2026"
l.date(now, { weekday: "short", month: "short", day: "numeric" }); // "Mon, Mar 16"

l.relative(value, unit, options?)#

부호가 있는 오프셋입니다. 과거는 음수, 미래는 양수입니다.

tsx
l.relative(-3, "day");       // "3 days ago" (en) / "vor 3 Tagen" (de)
l.relative(2, "hour");       // "in 2 hours"
l.relative(0, "second", { numeric: "auto" }); // "now"

목록#

l.list(items, options?)#

로캘에 맞는 접속 표현을 적용합니다. 기본 스타일은 long, 타입은 conjunction("and")입니다.

tsx
l.list(["apples", "oranges", "pears"]); // "apples, oranges, and pears" (en)
                                         // "apples, oranges y pears" (es)
l.list(["red", "blue"], { type: "disjunction" }); // "red or blue"

파일 크기#

l.fileSize(bytes)#

적절한 단위(B, KB, MB, GB, TB, PB)를 자동으로 선택하고, 결과를 로캘에 맞는 소수점 형식으로 포맷해 주는 편의 래퍼입니다.

tsx
l.fileSize(1024);          // "1 KB"
l.fileSize(1073741824);    // "1 GB" (en) / "1 Go" (fr)
l.fileSize(1536);          // "1.5 KB"

표시 이름#

l.displayName(code, type)#

언어, 지역, 스크립트 또는 통화 코드를 현지화된 이름으로 변환합니다.

tsx
l.displayName("en", "language");  // "English" (en) / "Englisch" (de) / "Английский" (ru)
l.displayName("US", "region");    // "United States" / "Vereinigte Staaten"
l.displayName("USD", "currency"); // "US Dollar" / "US-Dollar"
l.displayName("Cyrl", "script");  // "Cyrillic" / "Kyrillisch"

요청한 타입에서 코드를 인식하지 못하면 undefined를 반환합니다.

콜레이션#

l.sort(items, options?)#

입력값은 변경하지 않고 새로 정렬된 배열을 반환합니다.

tsx
l.sort(["ä", "z", "a"]);   // de: ["a", "ä", "z"]   sv: ["a", "z", "ä"]
l.sort(["File 10", "File 2"], { numeric: true }); // ["File 2", "File 10"]

분절#

l.segment(text, granularity?)#

로캘에 맞춰 문자군, 단어 또는 문장 단위로 나눕니다. 공백으로 단어를 구분하지 않는 CJK 언어에서는 특히 중요합니다.

tsx
l.segment("Hello world", "word");  // ["Hello", " ", "world"]
l.segment("こんにちは世界", "word"); // ["こんにちは", "世界"]   (ja)
l.segment("café", "grapheme");     // ["c", "a", "f", "é"]

granularity의 기본값은 "grapheme"입니다.

왜 얇은 래퍼인가요?#

모든 메서드는 네이티브 Intl 포매터에 위임됩니다. 별도의 파싱도, 숫자 라이브러리도, 추가 의존성도 없습니다. 런타임이 번들 크기를 작게 유지하고 플랫폼이 로캘 데이터를 처리하므로, V8 / SpiderMonkey ICU 테이블에 새로 추가된 로캘도 추가 작업 없이 바로 사용할 수 있습니다.

원시 Intl와 비교했을 때 추가되는 유일한 가치는 로캘 문자열입니다. <LingoProvider locale="...">로 한 번만 설정해 두면 모든 포매터가 그 값을 그대로 사용합니다. React 외부 코드처럼 원시 Intl를 직접 쓰고 싶다면, createLingo(locale)가 provider 없이 동일한 객체를 제공합니다.

다음으로#

  • useLingo — l.text와 l.rich를 사용해 문자열을 번역합니다.
  • 복수형과 select — 개수나 카테고리에 따라 형태를 선택합니다.

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

Max PrilutskiyMax Prilutskiy·업데이트됨 약 1개월 전·3 min read