함수 가져오기
함수 선언
Intlayer는 콘텐츠 모듈에서 콘텐츠 함수를 선언할 수 있게 해주며, 이러한 함수는 동기 또는 비동기일 수 있습니다. 애플리케이션이 빌드될 때, Intlayer는 이러한 함수를 실행하여 함수의 결과를 얻습니다. 반환 값은 JSON 객체이거나 문자열이나 숫자와 같은 간단한 값이어야 합니다.
다음은 콘텐츠를 가져오는 간단한 동기 함수의 예입니다:
typescript
1import type { DeclarationContent } from "intlayer";
2
3const functionContent = {
4 key: "function_content",
5 content: {
6 text: () => "이것은 함수에 의해 렌더링된 콘텐츠입니다.",
7 },
8} satisfies DeclarationContent;
9
10export default functionContent;이 예제에서 text 키는 문자열을 반환하는 함수를 포함하고 있습니다. 이 콘텐츠는 Intlayer의 인터프리터 패키지인 react-intlayer를 사용하여 React 컴포넌트에서 렌더링할 수 있습니다.
비동기 함수 가져오기
동기 함수에 더하여, Intlayer는 비동기 함수를 지원하여 외부 소스에서 데이터를 가져오거나 모의 데이터를 사용하여 데이터 검색을 시뮬레이션할 수 있게 해줍니다.
다음은 서버에서의 가져오기를 시뮬레이션하는 비동기 함수의 예입니다:
typescript
1import { setTimeout } from "node:timers/promises";
2import type { DeclarationContent } from "intlayer";
3
4const fakeFetch = async (): Promise<string> => {
5 // 서버에서 가져오는 것을 시뮬레이션하기 위해 200ms 대기합니다.
6 return await setTimeout(200).then(() => "서버에서 가져온 콘텐츠입니다.");
7};
8
9const asyncFunctionContent = {
10 key: "async_function",
11 content: { text: fakeFetch },
12} satisfies DeclarationContent;
13
14export default asyncFunctionContent;이 경우, fakeFetch 함수는 서버 응답 시간을 시뮬레이션하기 위해 지연을 모방합니다. Intlayer는 비동기 함수를 실행하고 결과를 text 키의 콘텐츠로 사용합니다.
React 컴포넌트에서 함수 기반 콘텐츠 사용하기
React 컴포넌트에서 함수 기반 콘텐츠를 사용하려면 react-intlayer에서 useIntlayer를 가져와야 하며, 콘텐츠 ID로 호출하여 콘텐츠를 검색해야 합니다. 다음은 예시입니다:
javascript
1import { useIntlayer } from "react-intlayer";
2
3const MyComponent = () => {
4 const functionContent = useIntlayer("function_content");
5 const asyncFunctionContent = useIntlayer("async_function_content");
6
7 return (
8 <div>
9 <p>{functionContent.text}</p>
10 {/* 출력: 이것은 함수에 의해 렌더링된 콘텐츠입니다. */}
11 <p>{asyncFunctionContent.text}</p>
12 {/* 출력: 서버에서 가져온 콘텐츠입니다. */}
13 </div>
14 );
15};
16
17export default MyComponent;이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.
문서에 대한 GitHub 링크