Vue Academy · 강의

useI18n 컴포저블과 t() 함수

useI18n(), t('key'), 템플릿의 $t, locale.value 전환과 로케일 감지를 다룹니다.

레슨 2/413개 단계

useI18n 컴포저블과 t() 함수은(는) CoddyKit의 무료 Vue Academy 강의입니다. 이것은 4개 중 2번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Vue Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

script setup에서 번역하기

컴포지션 API 모드에서 컴포넌트는 useI18n() 컴포저블을 통해 번역 도구에 접근합니다. 이 컴포저블은 t 함수와 반응형 locale ref 등을 반환합니다.

useI18n 호출하기

<script setup> 내부에서 useI18n()을 호출하고 필요한 값을 구조 분해 할당합니다.

import { useI18n } from "vue-i18n"

const { t, locale } = useI18n()

t 함수

t(key)는 활성 로캘의 번역된 문자열을 반환합니다. 템플릿에서 사용하는 $t에 해당하는 스크립트 측 기능입니다.

const { t } = useI18n()

const title = t("greeting") // "Hello" when locale is en

t를 사용한 보간

템플릿에서와 마찬가지로 두 번째 인수에 이름 있는 값의 객체를 전달하여 자리 표시자를 채웁니다.

const { t } = useI18n()

const msg = t("welcome", { name: "Alice" })
// message "Welcome, {name}!" => "Welcome, Alice!"

동적 문자열에 t 사용하기

t는 일반 함수이므로 스크립트 로직 어디에서나 사용할 수 있습니다. 토스트 메시지, 계산된 label 또는 유효성 검사 텍스트를 만들 때 유용합니다.

import { computed } from "vue"
const { t } = useI18n()

const label = computed(() => t("nav.home"))

locale ref

locale은 현재 언어 코드를 담은 반응형 ref입니다. 이 값을 읽으면 활성 언어를 알 수 있습니다.

const { locale } = useI18n()
console.log(locale.value) // "en"

전역에서 언어 전환하기

locale.value에 값을 할당하면 앱 전체의 활성 언어가 바뀝니다. 모든 t 호출과 템플릿의 $t가 반응형으로 새 언어에 맞게 다시 렌더링됩니다.

function switchToTurkish() {
  locale.value = "tr"
}
// All translated text updates automatically.

언어 전환기

간단한 전환기는 선택 상자를 locale에 연결합니다. 반응형이므로 옵션을 선택하면 전체 UI가 즉시 전환됩니다.

<template>
  <select v-model="locale">
    <option value="en">English</option>
    <option value="tr">Turkce</option>
  </select>
</template>

<script setup>
import { useI18n } from "vue-i18n"
const { locale } = useI18n()
</script>

$t와 t

두 기능은 서로 다른 두 컨텍스트에서 같은 작업을 수행합니다.

$t — 템플릿에서 자동으로 사용할 수 있으며 가져오기가 필요하지 않습니다.
t — useI18n()에서 가져오며 스크립트와 반응형 로직에서 사용합니다.

코드에서 문자열을 계산할 때는 t를 우선 사용하십시오.

범위 지정 메시지와 전역 메시지

useI18n()에 옵션을 전달하면 컴포넌트 로컬 메시지를 사용할 수 있습니다. 옵션이 없으면 전역 인스턴스를 사용하는데, 앱 전체 번역에 일반적으로 선택하는 방식입니다.

const { t } = useI18n() // global messages

// component-scoped (advanced):
// const { t } = useI18n({
//   messages: { en: { ok: "OK" }, tr: { ok: "Tamam" } }
// })

선택 사항 저장하기

언어는 사용자 환경 설정이므로 저장해야 합니다. 시작할 때 저장된 값을 읽고, 감시자를 사용하여 locale이 변경될 때마다 값을 기록합니다.

import { watch } from "vue"
const { locale } = useI18n()

watch(locale, (val) => localStorage.setItem("lang", val))

빠른 확인

useI18n에 대한 이해도를 확인하십시오.

인터랙티브 레슨에서 답해보세요

복습

실행 중 번역 API를 사용하는 방법을 배웠습니다.

useI18n()은 t와 반응형 locale ref를 반환합니다.
t(key)는 번역하고, t(key, { name })은 자리 표시자를 보간합니다.
스크립트 로직과 계산된 값에는 t를 사용하고, 템플릿에는 $t를 사용합니다.
locale.value를 설정하여 전역에서 반응형으로 언어를 전환합니다.
locale을 감시하는 watch로 선택 사항을 저장합니다.

무료로 시작

AI 튜터와 함께 HTML을(를) 배우세요 — 무료

브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.

코스: 42
레슨: 156

무료로 학습 시작 전체 코스 보기

자주 묻는 질문

“useI18n 컴포저블과 t() 함수” 강의는 무료인가요?

네 — “useI18n 컴포저블과 t() 함수” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Vue Academy 강의 전체를 잠금 해제할 수 있습니다. Vue Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“useI18n 컴포저블과 t() 함수”에서 뭘 배우나요?

useI18n(), t('key'), 템플릿의 $t, locale.value 전환과 로케일 감지를 다룹니다. 브라우저에서 직접 실행하는 실습 코드로 Vue Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Vue Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Vue Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 2번째 강의입니다.

“useI18n 컴포저블과 t() 함수” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Vue Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Vue Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Vue Academy(으)로 돌아가기