중첩 / 하위 콘텐츠 참조

중첩이 작동하는 방식

Intlayer에서는 nest 기능을 통해 다른 사전의 콘텐츠를 참조하고 재사용할 수 있습니다. 콘텐츠를 중복하는 대신, 기존 콘텐츠 모듈의 키를 통해 이를 지칭할 수 있습니다.

중첩 설정하기

Intlayer 프로젝트에서 중첩을 설정하려면 먼저 재사용하려는 기본 콘텐츠를 정의합니다. 그런 다음 별도의 콘텐츠 모듈에서 nest 기능을 사용하여 해당 콘텐츠를 가져옵니다.

기본 사전

다음은 중첩된 콘텐츠를 포함한 기본 사전의 예입니다:

import { type Dictionary } from "intlayer";const firstDictionary = {  key: "key_of_my_first_dictionary",  content: {    content: "content",    subContent: {      contentNumber: 0,      contentString: "string",    },  },} satisfies Dictionary;export default firstDictionary;

Nest를 사용한 참조

이제 위의 콘텐츠를 참조하는 nest 기능을 사용하는 또 다른 콘텐츠 모듈을 만듭니다. 전체 콘텐츠 또는 특정 중첩 값을 참조할 수 있습니다:

import { nest, type Dictionary } from "intlayer";const myNestingContent = {  key: "key_of_my_second_dictionary",  content: {    // 사전 전체를 참조합니다:    fullNestedContent: nest("key_of_my_first_dictionary"),    // 특정 중첩 값을 참조합니다:    partialNestedContent: nest(      "key_of_my_first_dictionary",      "subContent.contentNumber"    ),  },} satisfies Dictionary;export default myNestingContent;

두 번째 매개변수로 해당 콘텐츠 내의 중첩 값에 대한 경로를 지정할 수 있습니다. 경로를 제공하지 않으면 참조된 사전의 전체 콘텐츠가 반환됩니다.

React Intlayer와 함께 중첩 사용

React 컴포넌트에서 중첩 콘텐츠를 사용하려면 react-intlayer 패키지의 useIntlayer 훅을 활용합니다. 이 훅은 지정된 키를 기반으로 올바른 콘텐츠를 검색합니다. 사용 예시는 다음과 같습니다:

import type { FC } from "react";import { useIntlayer } from "react-intlayer";const NestComponent: FC = () => {  const { fullNestedContent, partialNestedContent } = useIntlayer(    "key_of_my_second_dictionary"  );  return (    <div>      <p>        Full Nested Content: {JSON.stringify(fullNestedContent)}        {/* 출력: {"content": "content", "subContent": {"contentNumber": 0, "contentString": "string"}} */}      </p>      <p>        Partial Nested Value: {partialNestedContent}        {/* 출력: 0 */}      </p>    </div>  );};export default NestComponent;

추가 자료

구성 및 사용에 대한 자세한 정보는 다음 리소스를 참조하십시오:

• Intlayer CLI 문서
• React Intlayer 문서
• Next Intlayer 문서

위 리소스는 다양한 환경 및 프레임워크에서 Intlayer를 설정하고 사용하는 방법에 대한 추가 정보를 제공합니다.