작가:

생성:2026-05-04마지막 업데이트:2026-05-04

이 문서를 원하는 AI 어시스턴트에 참조하세요ChatGPT Claude DeepSeek Google AI mode Gemini Perplexity Mistral Grok

이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다

버전 기록

"Init history"
v8.8.02026. 5. 4.

이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.

영어 원본 내용의 최신 버전을 보기

문서 수정

이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.

문서에 대한 GitHub 링크

복사

문서의 Markdown을 클립보드에 복사

복수형 콘텐츠 / Intlayer의 복수형

Name: Intlayer
Author: Intlayer

복수형 작동 방식

Intlayer에서 복수형 콘텐츠는 plural 함수를 통해 구현됩니다. 이 함수는 CLDR 복수형 범주(zero, one, two, few, many, other)를 해당 콘텐츠에 매핑합니다. 플랫폼에 내장된 Intl.PluralRules API를 사용하여 활성 로케일과 카운트 값을 기반으로 올바른 범주가 자동으로 선택됩니다.

직접 정의한 숫자 범위를 기반으로 콘텐츠를 선택하는 enu와 달리, plural은 선택을 CLDR 규칙에 위임합니다. 이로 인해 러시아어, 폴란드어, 아랍어 또는 웨일스어와 같이 복잡한 복수화 규칙이 있는 언어도 나머지 연산(modulo) 로직을 직접 작성하지 않고도 확장할 수 있습니다.

`plural` vs `enu` 사용 시기

To use plural content inside a React component, retrieve it via the useIntlayer hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.

**/*.tsx

코드 복사

코드를 클립보드에 복사

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Next.js Client Components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

코드 복사

코드를 클립보드에 복사

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Vue components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.vue

코드 복사

코드를 클립보드에 복사

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";defineProps<{ count: number }>();const { totalOpenings } = useIntlayer("total_openings");</script><template><div>  <p>{{ totalOpenings(count) }}</p></div></template>

To use plural content in Svelte components, retrieve it via the useIntlayer hook and call it with a count. The store is accessed with $. Here's an example:

**/*.svelte

코드 복사

코드를 클립보드에 복사

<script lang="ts">import { useIntlayer } from "svelte-intlayer";export let count: number;const content = useIntlayer("total_openings");</script><div><p>{$content.totalOpenings(count)}</p></div>

To use plural content in Preact components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

코드 복사

코드를 클립보드에 복사

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in SolidJS components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.tsx

코드 복사

코드를 클립보드에 복사

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const OpeningsComponent: Component<{ count: number }> = (props) => {
const { totalOpenings } = useIntlayer("total_openings");

return (
  <div>
    <p>{totalOpenings(props.count)}</p>
  </div>
);
};

export default OpeningsComponent;

To use plural content in Angular components, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

app.component.ts

코드 복사

코드를 클립보드에 복사

import { Component, Input } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-openings",template: `  <div>    <p>{{ content().totalOpenings(count) }}</p>  </div>`,})export class OpeningsComponent {@Input() count!: number;content = useIntlayer("total_openings");}

To use plural content with vanilla-intlayer, retrieve it via the useIntlayer hook and call it with a count. Here's an example:

**/*.ts

코드 복사

코드를 클립보드에 복사

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("total_openings").onChange((newContent) => {
document.getElementById("openings")!.textContent =
  newContent.totalOpenings(5);
});

// Initial render
document.getElementById("openings")!.textContent = content.totalOpenings(5);

복수형 콘텐츠 설정

Intlayer 프로젝트에서 복수형 콘텐츠를 설정하려면 plural 헬퍼를 사용하는 콘텐츠 모듈을 생성하십시오. other 범주는 필수이며, 로케일에 더 구체적인 범주가 정의되지 않았을 때 폴백으로 사용됩니다.

**/*.content.ts

코드 복사

코드를 클립보드에 복사

import { plural, t, type Dictionary } from "intlayer";

const openingsContent = {
  key: "total_openings",
  content: {
    totalOpenings: t({
      en: plural({
        one: "{{count}} opening",
        other: "{{count}} openings",
      }),
      ko: plural({
        other: "{{count}}개의 채용 공고",
      }),
    }),
  },
} satisfies Dictionary;

export default openingsContent;

지원되는 범주는 zero, one, two, few, many, other입니다. 타겟 언어가 사용하는 범주만 선언하면 되며, 특정 범주가 일치하지 않으면 Intlayer는 other로 폴백합니다.

{{count}} 플레이스홀더는 런타임에 전달하는 카운트로 자동으로 대체됩니다. 다른 플레이스홀더를 포함할 수도 있습니다(아래 사용자 정의 플레이스홀더 참조).

React Intlayer와 함께 복수형 콘텐츠 사용하기

React 컴포넌트 내에서 복수형 콘텐츠를 사용하려면 useIntlayer 훅을 통해 가져와 카운트와 함께 호출하십시오. 활성 로케일과 카운트가 결합되어 일치하는 CLDR 범주를 선택합니다.

**/*.tsx

코드 복사

코드를 클립보드에 복사

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
  const { totalOpenings } = useIntlayer("total_openings");

  return (
    <div>
      {/* 영어 기준:                                  */}
      {/*  count=0  → "0 openings"   (other)           */}
      {/*  count=1  → "1 opening"    (one)             */}
      {/*  count=2  → "2 openings"   (other)           */}
      {/*  count=21 → "21 openings"  (other)           */}
      <p>{totalOpenings(count)}</p>
    </div>
  );
};

export default OpeningsComponent;

반환된 함수를 두 가지 동등한 방식으로 호출할 수 있습니다.

tsx

코드 복사

코드를 클립보드에 복사

totalOpenings(21); // 약식: 카운트만 전달totalOpenings({ count: 21 }); // 명시적 형태

사용자 정의 플레이스홀더

복수형 문자열에는 {{count}} 이외의 플레이스홀더를 포함할 수 있습니다. count와 함께 객체 형태로 전달하십시오.

**/*.content.ts

코드 복사

코드를 클립보드에 복사

import { plural, type Dictionary } from "intlayer";

const inboxContent = {
  key: "inbox_summary",
  content: {
    summary: plural({
      other: "{{name}}님, {{count}}개의 새 메시지가 있습니다",
    }),
  },
} satisfies Dictionary;

export default inboxContent;

**/*.tsx

코드 복사

코드를 클립보드에 복사

const { summary } = useIntlayer("inbox_summary");

summary({ count: 1, name: "Alice" });
// → "Alice님, 1개의 새 메시지가 있습니다"

summary({ count: 7, name: "Alice" });
// → "Alice님, 7개의 새 메시지가 있습니다"

CLDR 범주 요약

언어마다 사용하는 CLDR 범주의 하위 집합이 다릅니다. 몇 가지 일반적인 사례는 다음과 같습니다.

테이블의 모든 내용 표시

테이블을 모달로 열어 모든 데이터를 명확하게 확인

언어	사용되는 범주
영어 (`en`)	`one`, `other`
프랑스어 (`fr`)	`one`, `many`, `other`
러시아어 (`ru`)	`one`, `few`, `many`, `other`
폴란드어 (`pl`)	`one`, `few`, `many`, `other`
아랍어 (`ar`)	`zero`, `one`, `two`, `few`, `many`, `other`
한국어 / 일본어 / 중국어	`other` 만 사용

이를 모두 외울 필요는 없습니다. 번역이 있는 범주를 선언하면 Intlayer가 필요할 때 other로 폴백합니다.

한계

다른 노드와 비교할 때, plural은 아직 자식 노드와 중첩될 수 없습니다.

예시:

유효:

코드 복사

코드를 클립보드에 복사

    totalOpenings: t({      en: plural({        one: "{{count}} opening",        other: "{{count}} openings",      }),      fr: plural({        one: "{{count}} offre",        other: "{{count}} offres",      }),    }),

무효:

코드 복사

코드를 클립보드에 복사

totalOpenings: plural({  one: t({    en: "{{count}} opening",    fr: "{{count}} offre",  }),  other: t({    en: "{{count}} openings",    fr: "{{count}} offres",  }),}),

추가 리소스

설정 및 사용에 대한 자세한 내용은 다음 리소스를 참조하십시오.

이 리소스들은 다양한 환경과 프레임워크에서 Intlayer의 설정 및 사용에 대한 더 깊은 통찰력을 제공합니다.

번역 열거

버전 기록

복수형 콘텐츠 / Intlayer의 복수형

복수형 작동 방식

plural vs enu 사용 시기

복수형 콘텐츠 설정

React Intlayer와 함께 복수형 콘텐츠 사용하기

사용자 정의 플레이스홀더

CLDR 범주 요약

한계

추가 리소스

`plural` vs `enu` 사용 시기