열거 / 복수화

    열거가 작동하는 방식

    Intlayer에서 열거는 특정 키를 해당 콘텐츠에 매핑하는 enu 함수를 통해 이루어집니다. 이러한 키는 숫자 값, 범위 또는 사용자 정의 식별자를 나타낼 수 있습니다. React Intlayer 또는 Next Intlayer와 함께 사용하면, 애플리케이션의 로캘과 정의된 규칙에 따라 적절한 콘텐츠가 자동으로 선택됩니다.

    열거 설정하기

    Intlayer 프로젝트에서 열거를 설정하려면 열거 정의를 포함한 콘텐츠 모듈을 생성해야 합니다. 다음은 자동차 수에 대한 간단한 열거의 예입니다:

    **/*.content.ts
    import { enu, type Dictionary } from "intlayer";const carEnumeration = {  key: "car_count",  content: {    numberOfCar: enu({      "<-1": "마이너스 1대보다 적은 자동차",      "-1": "마이너스 1대",      "0": "자동차가 없습니다",      "1": "자동차 한 대",      ">5": "몇 대의 자동차",      ">19": "많은 자동차",      "fallback": "대체 값", // 선택 사항    }),  },} satisfies Dictionary;export default carEnumeration;

    이 예제에서 enu는 다양한 조건을 특정 콘텐츠에 매핑합니다. React 컴포넌트에서 사용될 경우, Intlayer는 지정된 변수에 따라 적절한 콘텐츠를 자동으로 선택할 수 있습니다.

    Intlayer 열거에서 선언의 순서는 중요합니다. 유효한 첫 번째 선언이 선택됩니다. 여러 조건이 적용될 경우, 선언이 올바르게 순서대로 작성되어야 예기치 않은 동작을 방지할 수 있습니다.

    대체 값이 선언되지 않은 경우, 키가 일치하지 않으면 함수는 undefined를 반환합니다.

    React Intlayer와 열거 사용하기

    React 컴포넌트에서 열거를 사용하려면 react-intlayer 패키지의 useIntlayer 훅을 활용할 수 있습니다. 이 훅은 지정된 ID에 따라 올바른 콘텐츠를 가져옵니다. 다음은 사용하는 방법의 예제입니다:

    **/*.tsx
    import type { FC } from "react";import { useIntlayer } from "react-intlayer";const CarComponent: FC = () => {  const { numberOfCar } = useIntlayer("car_count");  return (    <div>      <p>        {          numberOfCar(0) // 출력: 자동차가 없습니다        }      </p>      <p>        {          numberOfCar(6) // 출력: 몇 대의 자동차        }      </p>      <p>        {          numberOfCar(20) // 출력: 많은 자동차        }      </p>      <p>        {          numberOfCar(0.01) // 출력: 대체 값        }      </p>    </div>  );};

    이 예제에서는 컴포넌트가 자동차 수에 따라 출력값을 동적으로 조정합니다. 지정된 범위에 따라 적절한 콘텐츠가 자동으로 선택됩니다.

    추가 자료

    설정 및 사용에 대한 더 자세한 정보는 다음 자료를 참조하세요:

    이 자료들은 다양한 환경 및 프레임워크에서 Intlayer를 설정하고 사용하는 방법에 대한 추가 정보를 제공합니다.

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

    문서에 대한 GitHub 링크