이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다
Intlayer MCP 서버를 통해 ChatGPT, DeepSeek, Cursor, VSCode 등에서 직접 문서를 검색할 수 있습니다.
MCP 서버 문서 보기이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.
영어 원본 내용의 최신 버전을 보기이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.
문서에 대한 GitHub 링크문서의 Markdown을 클립보드에 복사
React 통합: useDictionary 훅 문서
이 섹션에서는 React 애플리케이션 내에서 useDictionary 훅을 사용하는 방법에 대해 자세히 안내하며, 시각적 편집기 없이도 지역화된 콘텐츠를 효율적으로 처리할 수 있도록 합니다.
React에서 useDictionary 가져오기
useDictionary 훅은 상황에 따라 다음과 같이 React 애플리케이션에 통합할 수 있습니다:
클라이언트 컴포넌트:
typescript코드 복사코드를 클립보드에 복사
import { useDictionary } from "next-intlayer"; // 클라이언트 측 React 컴포넌트에서 사용
서버 컴포넌트:
typescript코드 복사코드를 클립보드에 복사
import { useDictionary } from "next-intlayer/server"; // 서버 측 React 컴포넌트에서 사용
매개변수
이 훅은 두 개의 매개변수를 받습니다:
- dictionary: 특정 키에 대한 지역화된 콘텐츠를 포함하는 선언된 사전 객체입니다.
- locale (선택 사항): 원하는 로케일입니다. 지정하지 않으면 현재 컨텍스트의 로케일이 기본값으로 사용됩니다.
사전
모든 사전 객체는 타입 안전성을 보장하고 런타임 오류를 방지하기 위해 구조화된 콘텐츠 파일에 선언되어야 합니다. 설정 지침은 여기에서 확인할 수 있습니다. 다음은 콘텐츠 선언 예시입니다:
코드를 클립보드에 복사
import { t, type Dictionary } from "intlayer";const exampleContent = { key: "component-example", content: { title: t({ en: "Client Component Example", fr: "Exemple de composant client", es: "Ejemplo de componente cliente", }), content: t({ en: "This is the content of a client component example", fr: "Ceci est le contenu d'un exemple de composant client", es: "Este es el contenido de un ejemplo de componente cliente", }), },} satisfies Dictionary;export default exampleContent;
React 클라이언트 컴포넌트에서의 사용 예시
아래는 React 컴포넌트에서 useDictionary 훅을 사용하는 예시입니다:
코드를 클립보드에 복사
"use client";import type { FC } from "react";import { useDictionary } from "next-intlayer";import clientComponentExampleContent from "./component.content";const ClientComponentExample: FC = () => { const { title, content } = useDictionary(clientComponentExampleContent); return ( <div> <h1>{title}</h1> <p>{content}</p> </div> );};
React 서버 컴포넌트에서의 사용 예시
IntlayerServerProvider 외부에서 useDictionary 훅을 사용하는 경우, 컴포넌트를 렌더링할 때 로케일을 명시적으로 파라미터로 제공해야 합니다:
코드를 클립보드에 복사
import type { FC } from "react";import { useDictionary } from "next-intlayer/server";import clientComponentExampleContent from "./component.content";const ServerComponentExample: FC = () => { const { content } = useDictionary(clientComponentExampleContent); return ( <div> <h1>{content.title}</h1> <p>{content.content}</p> </div> );};
속성에 대한 주의사항
비주얼 에디터를 사용하는 통합과 달리, buttonTitle.value와 같은 속성은 여기서 적용되지 않습니다. 대신, 콘텐츠에 선언된 대로 지역화된 문자열에 직접 접근하세요.
코드를 클립보드에 복사
<button title={content.title}>{content.content}</button>
추가 팁
- 타입 안전성: 항상 Dictionary를 사용하여 사전을 정의하여 타입 안전성을 보장하세요.
- 로컬라이제이션 업데이트: 콘텐츠를 업데이트할 때 모든 로케일이 일관되도록 하여 누락된 번역이 없도록 하세요.
이 문서는 useDictionary 훅의 통합에 중점을 두고 있으며, 시각적 편집기 기능에 의존하지 않고 로컬라이즈된 콘텐츠를 관리하는 간소화된 접근 방식을 제공합니다.
문서 이력
- 5.5.10 - 2025-06-29: 초기 이력