홈/i18nexus/useLanguageSwitcher

useLanguageSwitcher

언어 전환 및 관리를 위한 React 훅

🎮인터랙티브 데모

현재 언어: ko

💡 언어를 전환해보세요. 쿠키에 자동으로 저장됩니다!

개요

useLanguageSwitcher는 현재 언어 상태를 관리하고 언어를 전환하는 기능을 제공하는 React 훅입니다.

✓현재 언어 상태 조회

✓동적 언어 전환

✓사용 가능한 언어 목록 조회

✓자동 쿠키 저장

API 레퍼런스

Return Value

currentLanguage: string

현재 활성화된 언어 코드입니다.

const { currentLanguage } = useLanguageSwitcher();
console.log(currentLanguage); // "ko" or "en"

changeLanguage: (code: string) => void

언어를 변경하는 함수입니다. 변경된 언어는 쿠키에 자동으로 저장됩니다.

const { changeLanguage } = useLanguageSwitcher();

await changeLanguage("en");
await changeLanguage("ko");

availableLanguages: Language[]

사용 가능한 언어 목록입니다.

const { availableLanguages, changeLanguage } = useLanguageSwitcher();

// Language:
// { code: string, name: string, flag?: string }

availableLanguages.map((lang) => (
  <button onClick={() => changeLanguage(lang.code)}>
    {lang.flag} {lang.name}
  </button>
));

사용 예제

기본 사용법

"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function LanguageSelector() {
  const { currentLanguage, availableLanguages, changeLanguage } =
    useLanguageSwitcher();

  return (
    <div>
      <p>현재 언어: {currentLanguage}</p>

      {availableLanguages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
        >
          {lang.name}
        </button>
      ))}
    </div>
  );
}

드롭다운 선택기

"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function LanguageDropdown() {
  const { currentLanguage, availableLanguages, changeLanguage } =
    useLanguageSwitcher();

  return (
    <select
      value={currentLanguage}
      onChange={(e) => changeLanguage(e.target.value)}
      className="px-4 py-2 rounded-lg bg-slate-800 text-white"
    >
      {availableLanguages.map((lang) => (
        <option key={lang.code} value={lang.code}>
          {lang.flag} {lang.name}
        </option>
      ))}
    </select>
  );
}

고급 예제 - 플래그와 함께

"use client";

import { useLanguageSwitcher } from "i18nexus";

export default function FancyLanguageSwitcher() {
  const { currentLanguage, availableLanguages, changeLanguage } =
    useLanguageSwitcher();

  return (
    <div className="flex gap-2">
      {availableLanguages.map((lang) => (
        <button
          key={lang.code}
          onClick={() => changeLanguage(lang.code)}
          className={`px-4 py-2 rounded-lg transition-all ${
            currentLanguage === lang.code
              ? "bg-blue-600 text-white scale-105"
              : "bg-slate-800 text-slate-300 hover:bg-slate-700"
          }`}
        >
          <span className="text-xl mr-2">{lang.flag}</span>
          <span>{lang.name}</span>
        </button>
      ))}
    </div>
  );
}

모범 사례

✅권장: 언어 변경 후 전체 페이지 리로드하지 않기

i18nexus는 자동으로 모든 컴포넌트를 업데이트합니다. 수동으로 페이지를 리로드할 필요가 없습니다.

✅권장: 사용자 경험을 위한 시각적 피드백

현재 선택된 언어를 명확하게 표시하여 사용자가 현재 언어를 쉽게 알 수 있도록 하세요.

❌비권장: 서버 컴포넌트에서 사용

useLanguageSwitcher는 클라이언트 훅입니다. 서버 컴포넌트에서는 사용할 수 없습니다.

// 서버 컴포넌트에서는 클라이언트 훅을 사용할 수 없습니다.
export default async function Page() {
  changeLanguage("en"); // Error: client hook state is unavailable.
}

// 클라이언트 컴포넌트에서 언어를 변경합니다.
"use client";
export default function Page() {
  changeLanguage("en");
}

// 서버 컴포넌트 번역은 getTranslation()을 사용합니다.
import { getTranslation } from "i18nexus/server";

export default async function ServerPage() {
  const { t } = await getTranslation<"common">("common");
  return <h1>{t("환영합니다")}</h1>;
}