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

개요

  • @lingo.dev/react

시작하기

  • 빠른 시작

레퍼런스

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

복수형과 select

복수형과 select는 원문 문자열 하나만으로는 충분하지 않은 경우에 사용합니다. 즉, 번역이 숫자나 범주에 따라 달라지는 상황입니다. @lingo.dev/react는 내부적으로 ICU MessageFormat으로 컴파일되는 두 가지 직관적인 헬퍼(l.plural 및 l.select)를 제공하므로, 번역자는 익숙한 표준 구문으로 작업할 수 있고 런타임은 그대로 유지됩니다.

복수형#

l.plural(count, forms, { context })는 count와 로캘의 CLDR 복수 규칙에 따라 알맞은 형식을 선택합니다.

tsx
const l = useLingo();

l.plural(items.length, {
  one: "1 item",
  other: "{count} items",
}, { context: "Cart summary" });
// → "1 item" (en, count=1) / "5 items" (en, count=5)
// → "1 Eintrag" / "5 Einträge" (de, after translation)

로캘별 형식#

형식 맵에는 CLDR의 모든 복수 범주(zero, one, two, few, many, other)를 넣을 수 있습니다. 각 로캘은 필요한 범주만 사용합니다:

  • 영어는 one + other를 사용합니다(1 vs 그 외 전체)
  • 러시아어는 one + few + many + other를 사용합니다(1; 2-4; 5-20; 21, 31, ...)
  • 아랍어는 여섯 가지를 모두 사용합니다
  • 일본어는 other만 사용합니다(복수 구분 없음)

원본 로캘에서 사용하는 형식만 제공하면 됩니다. 나머지는 번역자가 대상 로캘에 맞게 추가합니다.

{count}는 모든 복수형 형식 안에 자동으로 삽입됩니다. values로 따로 전달하는 것이 아니라 첫 번째 인자에서 가져옵니다.

다른 플레이스홀더와 함께 쓰기#

개수와 다른 변수가 함께 들어가는 문장에서는 그 변수들을 형식 문자열 안에 넣어 작성하세요. 그러면 ICU로 그대로 전달됩니다.

tsx
l.plural(notifications.length, {
  one: "1 message from {sender}",
  other: "{count} messages from {sender}",
}, { context: "Inbox header" });

그다음 호출할 때 값을 전달하면 됩니다. 다만 l.plural의 시그니처에는 { context }만 있습니다. 이런 혼합 사례에서는 ICU plural 구문과 함께 l.text를 직접 사용하세요:

tsx
l.text(`{count, plural, one {1 message from {sender}} other {# messages from {sender}}}`, {
  values: { count: notifications.length, sender: user.name },
  context: "Inbox header",
});

# 토큰은 개수 값으로 그대로 치환됩니다. 중괄호 보간 형식 없이 값을 그대로 보여주고 싶을 때 유용합니다.

Select#

l.select(value, forms, { context })는 문자열 키(성별, 역할, 콘텐츠 유형처럼 범주로 나눌 수 있는 값)에 따라 형식을 선택합니다.

tsx
l.select(user.gender, {
  male: "He uploaded a photo",
  female: "She uploaded a photo",
  other: "They uploaded a photo",
}, { context: "Activity feed" });

기본값으로 쓰이는 other는 필수입니다. 일치는 정확해야 하며, 유사 매칭이나 대소문자 구분 없는 매칭은 지원하지 않습니다.

Selectordinal#

서수(1st, 2nd, 3rd)에는 l.text를 통해 ICU selectordinal를 직접 사용하세요:

tsx
l.text(`You finished in {place, selectordinal, one {#st} two {#nd} few {#rd} other {#th}} place`, {
  values: { place: rank },
  context: "Leaderboard",
});
// → "You finished in 1st place" / "2nd" / "3rd" / "4th, 5th, ..."

컴파일 결과#

l.plural와 l.select는 모두 ICU MessageFormat 문자열을 만들고 이를 l.text에 전달합니다. 이렇게 컴파일된 형식은 lingo extract에 의해 추출되어 로캘 파일에 저장되며, 번역자는 JS 객체 리터럴이 아니라 ICU 구문을 직접 수정하게 됩니다.

예: l.plural(n, { one: "1 item", other: "{count} items" }, { context: "Cart" })는 다음과 같이 추출됩니다:

text
{count, plural, one {1 item} other {{count} items}}

즉, 번역자는 원문에 없는 범주까지 포함해 로캘별로 범주를 조정할 수 있습니다. 러시아어도 코드 변경 없이 {count, plural, one {...} few {...} many {...} other {...}}가 됩니다.

이럴 때는 사용하지 마세요#

  • 단순한 "1 또는 여러 개" 불리언. if 아래에 l.text 호출 두 개를 두는 방식이면 충분하고, 번역자도 더 쉽게 알아볼 수 있습니다.
  • 사용자에게 보이지 않는 프로그래밍 enum. plural / select는 앱 로직 분기를 위한 것이 아니라 범주형 메시지의 번역을 위한 기능입니다.

다음 단계#

  • useLingo — 기본 l.text 및 l.rich 동작 방식.
  • Formatting — 네이티브 Intl을 활용한 숫자, 통화, 날짜, 목록 형식 지정.

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

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