생성:2024-08-11마지막 업데이트:2025-06-29
이 문서를 원하는 AI 어시스턴트에 참조하세요ChatGPTClaudeDeepSeekGoogle AI modeGeminiPerplexityMistralGrok
이 페이지와 원하는 AI 어시스턴트를 사용하여 문서를 요약합니다
이 페이지의 콘텐츠는 AI를 사용하여 번역되었습니다.
영어 원본 내용의 최신 버전을 보기문서 수정
이 문서를 개선할 아이디어가 있으시면 GitHub에 풀 리퀘스트를 제출하여 자유롭게 기여해 주세요.
문서에 대한 GitHub 링크복사
문서의 Markdown을 클립보드에 복사
React 통합: useLocale 훅 문서
이 섹션에서는 React 애플리케이션에서 로케일 관리를 위해 설계된 react-intlayer 라이브러리의 useLocale 훅에 대한 자세한 내용을 제공합니다.
React에서 useLocale 가져오기
useLocale 훅을 React 애플리케이션에 통합하려면 해당 패키지에서 가져오세요:
typescript
코드 복사
코드를 클립보드에 복사
import { useLocale } from "react-intlayer"; // 로케일 관리를 위해 React 컴포넌트에서 사용개요
useLocale 훅은 React 컴포넌트 내에서 로케일 설정에 쉽게 접근하고 조작할 수 있는 방법을 제공합니다. 현재 로케일, 기본 로케일, 사용 가능한 모든 로케일 및 로케일 설정을 업데이트하는 함수에 접근할 수 있습니다.
사용법
다음은 React 컴포넌트 내에서 useLocale 훅을 사용하는 방법입니다:
src/components/LocaleSwitcher.tsx
코드 복사
코드를 클립보드에 복사
import type { FC } from "react";
import { useLocale } from "react-intlayer";
const LocaleSwitcher: FC = () => {
const { locale, defaultLocale, availableLocales, setLocale } = useLocale();
return (
<div>
<h1>현재 로케일: {locale}</h1>
<p>기본 로케일: {defaultLocale}</p>
<select value={locale} onChange={(e) => setLocale(e.target.value)}>
{availableLocales.map((loc) => (
<option key={loc} value={loc}>
{loc}
</option>
))}
</select>
</div>
);
};
export default LocaleSwitcher;매개변수 및 반환 값
useLocale 훅을 호출하면 다음 속성을 포함하는 객체를 반환합니다:
locale: React 컨텍스트에 설정된 현재 로케일입니다.defaultLocale: 구성에서 정의된 기본 로케일입니다.availableLocales: 구성에서 정의된 사용 가능한 모든 로케일 목록입니다.setLocale: 애플리케이션 컨텍스트 내에서 현재 로케일을 업데이트하는 함수입니다.
예제
이 예제는 useLocale 훅을 사용하여 로케일 스위처를 렌더링하는 컴포넌트를 보여줍니다. 사용자는 이를 통해 애플리케이션의 로케일을 동적으로 변경할 수 있습니다:
src/components/LocaleSelector.tsx
코드 복사
코드를 클립보드에 복사
import type { FC } from "react";
import { useLocale } from "react-intlayer";
const LocaleSelector: FC = () => {
const { locale, setLocale, availableLocales } = useLocale();
const handleLocaleChange = (newLocale) => {
setLocale(newLocale);
};
return (
<select value={locale} onChange={(e) => handleLocaleChange(e.target.value)}>
{availableLocales.map((locale) => (
<option key={locale} value={locale}>
{locale}
</option>
))}
</select>
);
};결론
react-intlayer의 useLocale 훅은 React 애플리케이션에서 로케일을 관리하는 데 필수적인 도구로, 다양한 국제 사용자에게 효과적으로 애플리케이션을 적응시키는 데 필요한 기능을 제공합니다.