작가:
    생성:2026-09-19마지막 업데이트:2026-09-19

    useLocale 훅 문서

    remix-intlayeruseLocale 훅은 현재 처리 중인 HTTP 요청의 로케일과 함께 프로젝트에 구성된 기본 로케일 및 사용 가능한 로케일에 대한 접근을 제공합니다.

    사용법

    Remix 컴포넌트 내(예: 언어 전환기):

    src/components/LocaleSwitcher.tsx
    import { type FC } from "react";
    import { Link } from "@remix-run/react";
    import { useLocale } from "remix-intlayer";
    import { getLocalizedUrl, getPathWithoutLocale } from "intlayer";
    
    export const LocaleSwitcher: FC = () => {
      const { locale, availableLocales } = useLocale();
      const pathWithoutLocale = getPathWithoutLocale();
    
      return (
        <nav>
          <ul>
            {availableLocales.map((localeItem) => (
              <li key={localeItem} className="p-1">
                <Link
                  href={getLocalizedUrl(pathWithoutLocale, localeItem)}
                  aria-current={localeItem === locale ? "page" : undefined}
                >
                  {localeItem.toUpperCase()}
                </Link>
              </li>
            ))}
          </ul>
        </nav>
      );
    };
    

    라우트 핸들러 내에서:

    src/server.ts
    import { createRouter } from "remix/router";
    import { intlayer, useLocale } from "remix-intlayer";
    
    const router = createRouter({
      middleware: [intlayer()],
    });
    
    router.get("/api/locale-info", () => {
      const { locale, defaultLocale, availableLocales } = useLocale();
    
      return Response.json({
        locale,
        defaultLocale,
        availableLocales,
      });
    });
    

    반환값

    이 훅은 UseLocaleResult 타입의 객체를 반환합니다.

    속성타입설명
    localeDeclaredLocales현재 요청에 대해 확인된 로케일입니다.
    defaultLocaleDeclaredLocalesintlayer.config.ts에 구성된 기본 대체 로케일입니다.
    availableLocalesDeclaredLocales[]intlayer.config.ts에 구성된 사용 가능한 모든 로케일의 배열입니다.

    설명

    1. 요청 범위 해결: intlayer() 미들웨어에서 처리하는 활성 요청에서 useLocale은 요청 저장소에서 확인된 로케일을 읽습니다.
    2. 원활한 대체(Fallback): 요청 컨텍스트 외부(예: 초기화 스크립트 또는 테스트 제품군)에서 호출되면 구성된 defaultLocale로 대체됩니다.

    관련 문서