이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다
이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.
영어 원본 내용의 최신 버전을 보기If you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
함수 패칭
Intlayer는 콘텐츠 모듈에서 동기 또는 비동기 함수 콘텐츠를 선언할 수 있도록 지원합니다. 애플리케이션이 빌드될 때 Intlayer는 이러한 함수들을 실행하여 함수의 결과를 얻습니다. 반환 값은 JSON 객체이거나 문자열 또는 숫자와 같은 단순 값이어야 합니다.
경고: 함수 패칭은 현재 JSON 콘텐츠 선언 및 원격 콘텐츠 선언 파일에서는 사용할 수 없습니다.
함수 선언
다음은 간단한 동기 함수 콘텐츠 패칭 예제입니다:
코드를 클립보드에 복사
import type { Dictionary } from "intlayer";
const functionContent = {
key: "function_content",
content: {
text: () => "This is the content rendered by a function",
},
} satisfies Dictionary;
export default functionContent;이 예제에서 text 키는 문자열을 반환하는 함수를 포함합니다. 이 콘텐츠는 react-intlayer와 같은 Intlayer의 인터프리터 패키지를 사용하여 React 컴포넌트에서 렌더링할 수 있습니다.
비동기 함수 호출
동기 함수 외에도, Intlayer는 비동기 함수를 지원하여 외부 소스에서 데이터를 가져오거나 모의 데이터를 사용하여 데이터 검색을 시뮬레이션할 수 있습니다.
아래는 서버에서 데이터를 가져오는 것을 시뮬레이션하는 비동기 함수의 예입니다:
코드를 클립보드에 복사
import { setTimeout } from "node:timers/promises";
import type { Dictionary } from "intlayer";
const fakeFetch = async (): Promise<string> => {
// 서버에서 가져오는 것을 시뮬레이션하기 위해 200ms 대기
return await setTimeout(200).then(() => "서버에서 가져온 콘텐츠입니다");
};
const asyncFunctionContent = {
key: "async_function",
content: { text: fakeFetch },
} satisfies Dictionary;
export default asyncFunctionContent;이 경우, fakeFetch 함수는 서버 응답 시간을 시뮬레이션하기 위해 지연을 모방합니다. Intlayer는 비동기 함수를 실행하고 그 결과를 text 키의 콘텐츠로 사용합니다.
React 컴포넌트에서 함수 기반 콘텐츠 사용하기
React 컴포넌트에서 함수 기반 콘텐츠를 사용하려면, react-intlayer에서 useIntlayer를 가져와서 콘텐츠 ID로 호출하여 콘텐츠를 가져와야 합니다. 다음은 예시입니다:
코드를 클립보드에 복사
import type { FC } from "react";
import { useIntlayer } from "react-intlayer";
const MyComponent: FC = () => {
const functionContent = useIntlayer("function_content");
const asyncFunctionContent = useIntlayer("async_function_content");
return (
<div>
<p>{functionContent.text}</p>
{/* 출력: 함수에 의해 렌더링된 콘텐츠입니다 */}
<p>{asyncFunctionContent.text}</p>
{/* 출력: 서버에서 가져온 콘텐츠입니다 */}
</div>
);
};
export default MyComponent;