이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.
영어 원본 내용의 최신 버전을 보기함수 가져오기
Intlayer는 콘텐츠 모듈에서 동기 또는 비동기 콘텐츠 함수를 선언할 수 있도록 합니다. 애플리케이션이 빌드될 때, Intlayer는 이러한 함수를 실행하여 함수의 결과를 얻습니다. 반환 값은 JSON 객체 또는 문자열이나 숫자와 같은 단순 값이어야 합니다.
경고: 함수 가져오기는 현재 JSON 콘텐츠 선언 및 원격 콘텐츠 선언 파일에서 사용할 수 없습니다.
함수 선언
다음은 간단한 동기 함수로 콘텐츠를 가져오는 예제입니다:
import type { Dictionary } from "intlayer";const functionContent = { key: "function_content", content: { text: () => "이것은 함수에 의해 렌더링된 콘텐츠입니다", },} 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;이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.
문서에 대한 GitHub 링크