Intlayer에서는 gender 함수를 통해 성별 기반 콘텐츠를 구현합니다. 이 함수는 특정 성별 값('male', 'female')을 해당하는 콘텐츠에 매핑합니다. 이 방식을 통해 주어진 성별에 따라 동적으로 콘텐츠를 선택할 수 있습니다. React Intlayer 또는 Next Intlayer와 통합하면, 런타임에 제공된 성별에 따라 적절한 콘텐츠가 자동으로 선택됩니다.

성별 기반 콘텐츠 설정

Intlayer 프로젝트에서 성별 기반 콘텐츠를 설정하려면, 성별별 정의를 포함하는 콘텐츠 모듈을 생성하세요. 아래는 다양한 형식의 예시입니다.

**/*.content.ts

코드 복사

코드를 클립보드에 복사

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "남성 사용자용 콘텐츠",
      female: "여성 사용자용 콘텐츠",
      fallback: "성별이 지정되지 않았을 때의 콘텐츠", // 선택 사항
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

만약 fallback이 선언되지 않았다면, 성별이 지정되지 않았거나 정의된 성별과 일치하지 않을 경우 마지막으로 선언된 키가 fallback으로 사용됩니다.

React Intlayer에서 성별 기반 콘텐츠 사용하기

React 컴포넌트 내에서 성별 기반 콘텐츠를 활용하려면, react-intlayer 패키지에서 useIntlayer 훅을 임포트하여 사용하세요. 이 훅은 지정된 키에 대한 콘텐츠를 가져오며, 적절한 출력을 선택하기 위해 성별을 전달할 수 있습니다.

**/*.tsx

코드 복사

코드를 클립보드에 복사

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

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 출력: 남성 사용자용 콘텐츠 */
          myGender("male")
        }
      </p>
      <p>
        {
          /* 출력: 여성 사용자용 내 콘텐츠 */
          myGender("female")
        }
      </p>
      <p>
        {
          /* 출력: 남성 사용자용 내 콘텐츠 */
          myGender("m")
        }
      </p>
      <p>
        {
          /* 출력: 여성 사용자용 내 콘텐츠 */
          myGender("f")
        }
      </p>
      <p>
        {
          /* 출력: 성별이 지정되지 않았을 때 내 콘텐츠 */
          myGender("")
        }
      </p>
      <p>
        {
          /* 출력: 성별이 지정되지 않았을 때 내 콘텐츠 */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

추가 자료

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

이 자료들은 다양한 환경과 프레임워크에서 Intlayer의 설정 및 사용에 대한 추가적인 통찰을 제공합니다.

조건

삽입

생성:2025-07-27마지막 업데이트:2025-07-27

이 문서를 원하는 AI 어시스턴트에 참조하세요

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

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

버전 기록

"성별 기반 콘텐츠 도입"
v5.7.22025. 7. 27.

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

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

문서 수정

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

문서에 대한 GitHub 링크

복사

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

성별 기반 콘텐츠 / Intlayer의 성별

성별 작동 방식

성별 기반 콘텐츠 설정

Intlayer 프로젝트에서 성별 기반 콘텐츠를 설정하려면, 성별별 정의를 포함하는 콘텐츠 모듈을 생성하세요. 아래는 다양한 형식의 예시입니다.

**/*.content.ts

코드 복사

코드를 클립보드에 복사

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

const myGenderContent = {
  key: "my_key",
  content: {
    myGender: gender({
      male: "남성 사용자용 콘텐츠",
      female: "여성 사용자용 콘텐츠",
      fallback: "성별이 지정되지 않았을 때의 콘텐츠", // 선택 사항
    }),
  },
} satisfies Dictionary;

export default myGenderContent;

만약 fallback이 선언되지 않았다면, 성별이 지정되지 않았거나 정의된 성별과 일치하지 않을 경우 마지막으로 선언된 키가 fallback으로 사용됩니다.

React Intlayer에서 성별 기반 콘텐츠 사용하기

**/*.tsx

코드 복사

코드를 클립보드에 복사

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

const GenderComponent: FC = () => {
  const { myGender } = useIntlayer("my_key");

  return (
    <div>
      <p>
        {
          /* 출력: 남성 사용자용 콘텐츠 */
          myGender("male")
        }
      </p>
      <p>
        {
          /* 출력: 여성 사용자용 내 콘텐츠 */
          myGender("female")
        }
      </p>
      <p>
        {
          /* 출력: 남성 사용자용 내 콘텐츠 */
          myGender("m")
        }
      </p>
      <p>
        {
          /* 출력: 여성 사용자용 내 콘텐츠 */
          myGender("f")
        }
      </p>
      <p>
        {
          /* 출력: 성별이 지정되지 않았을 때 내 콘텐츠 */
          myGender("")
        }
      </p>
      <p>
        {
          /* 출력: 성별이 지정되지 않았을 때 내 콘텐츠 */
          myGender(undefined)
        }
      </p>
    </div>
  );
};

export default GenderComponent;

추가 자료

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

이 자료들은 다양한 환경과 프레임워크에서 Intlayer의 설정 및 사용에 대한 추가적인 통찰을 제공합니다.

조건

삽입