{
  "version": 1.1,
  "tags": [
    {
      "name": "Transition",
      "description": {
        "kind": "markdown",
        "value": "\n**하나의** 요소 또는 컴포넌트에 애니메이션 전환 효과를 제공합니다.\n\n- **Props**\n\n  ```ts\n  interface TransitionProps {\n    /**\n     * 전환 CSS 클래스 이름을 자동으로 생성하는 데 사용됩니다.\n     * 예: `name: 'fade'`를 지정하면 `.fade-enter`,\n     * `.fade-enter-active` 등으로 자동 확장됩니다.\n     */\n    name?: string\n    /**\n     * CSS 전환 클래스를 적용할지 여부입니다.\n     * 기본값: true\n     */\n    css?: boolean\n    /**\n     * 전환 종료 타이밍을 결정하기 위해\n     * 대기할 전환 이벤트의 종류를 지정합니다.\n     * 기본 동작은 더 긴 지속 시간을 가진\n     * 타입을 자동 감지합니다.\n     */\n    type?: 'transition' | 'animation'\n    /**\n     * 전환의 명시적 지속 시간을 지정합니다.\n     * 기본 동작은 루트 전환 요소에서 첫 번째 `transitionend`\n     * 또는 `animationend` 이벤트를 대기합니다.\n     */\n    duration?: number | { enter: number; leave: number }\n    /**\n     * 나가기/들어오기 전환의 타이밍 시퀀스를 제어합니다.\n     * 기본 동작은 동시에 실행됩니다.\n     */\n    mode?: 'in-out' | 'out-in' | 'default'\n    /**\n     * 초기 렌더 시 전환을 적용할지 여부입니다.\n     * 기본값: false\n     */\n    appear?: boolean\n\n    /**\n     * 전환 클래스를 커스터마이즈하기 위한 props입니다.\n     * 템플릿에서는 케밥 케이스를 사용하세요. 예: enter-from-class=\"xxx\"\n     */\n    enterFromClass?: string\n    enterActiveClass?: string\n    enterToClass?: string\n    appearFromClass?: string\n    appearActiveClass?: string\n    appearToClass?: string\n    leaveFromClass?: string\n    leaveActiveClass?: string\n    leaveToClass?: string\n  }\n  ```\n\n- **이벤트**\n\n  - `@before-enter`\n  - `@before-leave`\n  - `@enter`\n  - `@leave`\n  - `@appear`\n  - `@after-enter`\n  - `@after-leave`\n  - `@after-appear`\n  - `@enter-cancelled`\n  - `@leave-cancelled` (`v-show`에서만)\n  - `@appear-cancelled`\n\n- **예시**\n\n  단순 요소:\n\n  ```html\n  <Transition>\n    <div v-if=\"ok\">토글된 내용</div>\n  </Transition>\n  ```\n\n  `key` 속성을 변경하여 전환 강제 적용:\n\n  ```html\n  <Transition>\n    <div :key=\"text\">{{ text }}</div>\n  </Transition>\n  ```\n\n  동적 컴포넌트, 전환 모드 + appear 시 애니메이션:\n\n  ```html\n  <Transition name=\"fade\" mode=\"out-in\" appear>\n    <component :is=\"view\"></component>\n  </Transition>\n  ```\n\n  전환 이벤트 리스닝:\n\n  ```html\n  <Transition @after-enter=\"onTransitionComplete\">\n    <div v-show=\"ok\">토글된 내용</div>\n  </Transition>\n  ```\n\n- **더 알아보기** [가이드 - Transition](https://ko.vuejs.org/guide/built-ins/transition.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#transition"
    },
    {
      "name": "TransitionGroup",
      "description": {
        "kind": "markdown",
        "value": "\n목록 내 **여러** 요소 또는 컴포넌트에 전환 효과를 제공합니다.\n\n- **Props**\n\n  `<TransitionGroup>`은 `mode`를 제외한 `<Transition>`과 동일한 props를 받으며, 두 가지 추가 props가 있습니다:\n\n  ```ts\n  interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {\n    /**\n     * 정의하지 않으면 fragment로 렌더링됩니다.\n     */\n    tag?: string\n    /**\n     * 이동 전환 중 적용되는 CSS 클래스를 커스터마이즈합니다.\n     * 템플릿에서는 케밥 케이스를 사용하세요. 예: move-class=\"xxx\"\n     */\n    moveClass?: string\n  }\n  ```\n\n- **이벤트**\n\n  `<TransitionGroup>`은 `<Transition>`과 동일한 이벤트를 발생시킵니다.\n\n- **상세 설명**\n\n  기본적으로 `<TransitionGroup>`은 래퍼 DOM 요소를 렌더링하지 않지만, `tag` prop을 통해 정의할 수 있습니다.\n\n  `<transition-group>` 내의 모든 자식은 애니메이션이 제대로 동작하려면 [**고유한 key**](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)가 있어야 합니다.\n\n  `<TransitionGroup>`은 CSS transform을 통한 이동 전환을 지원합니다. 업데이트 후 자식의 화면 위치가 변경되면, 이동 CSS 클래스( `name` 속성에서 자동 생성되거나 `move-class` prop으로 지정됨)가 적용됩니다. 이동 클래스가 적용될 때 CSS `transform` 속성이 \"전환 가능\"하다면, [FLIP 기법](https://aerotwist.com/blog/flip-your-animations/)을 사용하여 부드럽게 목적지로 애니메이션됩니다.\n\n- **예시**\n\n  ```html\n  <TransitionGroup tag=\"ul\" name=\"slide\">\n    <li v-for=\"item in items\" :key=\"item.id\">\n      {{ item.text }}\n    </li>\n  </TransitionGroup>\n  ```\n\n- **더 알아보기** [가이드 - TransitionGroup](https://ko.vuejs.org/guide/built-ins/transition-group.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#transitiongroup"
    },
    {
      "name": "KeepAlive",
      "description": {
        "kind": "markdown",
        "value": "\n내부에 감싼 동적으로 토글되는 컴포넌트를 캐시합니다.\n\n- **Props**\n\n  ```ts\n  interface KeepAliveProps {\n    /**\n     * 지정하면, `include`에 일치하는 이름의\n     * 컴포넌트만 캐시됩니다.\n     */\n    include?: MatchPattern\n    /**\n     * `exclude`에 일치하는 이름의\n     * 컴포넌트는 캐시되지 않습니다.\n     */\n    exclude?: MatchPattern\n    /**\n     * 캐시할 컴포넌트 인스턴스의 최대 개수입니다.\n     */\n    max?: number | string\n  }\n\n  type MatchPattern = string | RegExp | (string | RegExp)[]\n  ```\n\n- **상세 설명**\n\n  동적 컴포넌트를 감쌀 때, `<KeepAlive>`는 비활성 컴포넌트 인스턴스를 파괴하지 않고 캐시합니다.\n\n  한 번에 `<KeepAlive>`의 직접 자식으로는 하나의 활성 컴포넌트 인스턴스만 존재할 수 있습니다.\n\n  `<KeepAlive>` 내부에서 컴포넌트가 토글될 때, 해당 컴포넌트의 `activated` 및 `deactivated` 라이프사이클 훅이 호출됩니다. 이는 `mounted`와 `unmounted`의 대안으로, 이 둘은 호출되지 않습니다. 이 동작은 `<KeepAlive>`의 직접 자식뿐만 아니라 모든 하위 컴포넌트에도 적용됩니다.\n\n- **예시**\n\n  기본 사용법:\n\n  ```html\n  <KeepAlive>\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `v-if` / `v-else` 분기와 함께 사용할 때는 한 번에 하나의 컴포넌트만 렌더링되어야 합니다:\n\n  ```html\n  <KeepAlive>\n    <comp-a v-if=\"a > 1\"></comp-a>\n    <comp-b v-else></comp-b>\n  </KeepAlive>\n  ```\n\n  `<Transition>`과 함께 사용:\n\n  ```html\n  <Transition>\n    <KeepAlive>\n      <component :is=\"view\"></component>\n    </KeepAlive>\n  </Transition>\n  ```\n\n  `include` / `exclude` 사용:\n\n  ```html\n  <!-- 콤마로 구분된 문자열 -->\n  <KeepAlive include=\"a,b\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 정규식 (v-bind 사용) -->\n  <KeepAlive :include=\"/a|b/\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n\n  <!-- 배열 (v-bind 사용) -->\n  <KeepAlive :include=\"['a', 'b']\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n  `max`와 함께 사용:\n\n  ```html\n  <KeepAlive :max=\"10\">\n    <component :is=\"view\"></component>\n  </KeepAlive>\n  ```\n\n- **더 알아보기** [가이드 - KeepAlive](https://ko.vuejs.org/guide/built-ins/keep-alive.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#keepalive"
    },
    {
      "name": "Teleport",
      "description": {
        "kind": "markdown",
        "value": "\n슬롯 콘텐츠를 DOM의 다른 위치에 렌더링합니다.\n\n- **Props**\n\n  ```ts\n  interface TeleportProps {\n    /**\n     * 필수. 대상 컨테이너를 지정합니다.\n     * 선택자 또는 실제 요소가 될 수 있습니다.\n     */\n    to: string | HTMLElement\n    /**\n     * `true`이면, 콘텐츠가 대상 컨테이너로 이동하지 않고\n     * 원래 위치에 남아 있습니다.\n     * 동적으로 변경할 수 있습니다.\n     */\n    disabled?: boolean\n    /**\n     * `true`이면, Teleport는\n     * 애플리케이션의 다른 부분이 마운트된 후\n     * 대상 해석을 지연합니다. (3.5+)\n     */\n    defer?: boolean\n  }\n  ```\n\n- **예시**\n\n  대상 컨테이너 지정:\n\n  ```html\n  <Teleport to=\"#some-id\" />\n  <Teleport to=\".some-class\" />\n  <Teleport to=\"[data-teleport]\" />\n  ```\n\n  조건부 비활성화:\n\n  ```html\n  <Teleport to=\"#popup\" :disabled=\"displayVideoInline\">\n    <video src=\"./my-movie.mp4\">\n  </Teleport>\n  ```\n\n  대상 해석 지연 <sup class=\"vt-badge\" data-text=\"3.5+\" />:\n\n  ```html\n  <Teleport defer to=\"#late-div\">...</Teleport>\n\n  <!-- 템플릿의 다른 위치에 -->\n  <div id=\"late-div\"></div>\n  ```\n\n- **더 알아보기** [가이드 - Teleport](https://ko.vuejs.org/guide/built-ins/teleport.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#teleport"
    },
    {
      "name": "Suspense",
      "description": {
        "kind": "markdown",
        "value": "\n컴포넌트 트리 내에서 중첩된 비동기 의존성을 조율하는 데 사용됩니다.\n\n- **Props**\n\n  ```ts\n  interface SuspenseProps {\n    timeout?: string | number\n    suspensible?: boolean\n  }\n  ```\n\n- **이벤트**\n\n  - `@resolve`\n  - `@pending`\n  - `@fallback`\n\n- **상세 설명**\n\n  `<Suspense>`는 두 개의 슬롯을 받습니다: `#default` 슬롯과 `#fallback` 슬롯. 기본 슬롯을 메모리에서 렌더링하는 동안 fallback 슬롯의 내용을 표시합니다.\n\n  기본 슬롯을 렌더링하는 동안 비동기 의존성([비동기 컴포넌트](https://ko.vuejs.org/guide/components/async.html) 및 [`async setup()`](https://ko.vuejs.org/guide/built-ins/suspense.html#async-setup)이 있는 컴포넌트를 만나면, 모든 의존성이 해결될 때까지 기본 슬롯을 표시하지 않습니다.\n\n  Suspense를 `suspensible`로 설정하면, 모든 비동기 의존성 처리가 부모 Suspense에 의해 처리됩니다. [구현 세부사항](https://github.com/vuejs/core/pull/6736) 참고\n\n- **더 알아보기** [가이드 - Suspense](https://ko.vuejs.org/guide/built-ins/suspense.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-components.html#suspense"
    },
    {
      "name": "component",
      "description": {
        "kind": "markdown",
        "value": "\n동적 컴포넌트 또는 엘리먼트를 렌더링하기 위한 \"메타 컴포넌트\"입니다.\n\n- **Props**\n\n  ```ts\n  interface DynamicComponentProps {\n    is: string | Component\n  }\n  ```\n\n- **상세 설명**\n\n  실제로 렌더링할 컴포넌트는 `is` prop에 의해 결정됩니다.\n\n  - `is`가 문자열일 경우, HTML 태그 이름이거나 등록된 컴포넌트의 이름일 수 있습니다.\n\n  - 또는, `is`에 컴포넌트의 정의 자체를 직접 바인딩할 수도 있습니다.\n\n- **예시**\n\n  등록된 이름으로 컴포넌트 렌더링하기 (Options API):\n\n  ```vue\n  <script>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n\n  export default {\n    components: { Foo, Bar },\n    data() {\n      return {\n        view: 'Foo'\n      }\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"view\" />\n  </template>\n  ```\n\n  컴포넌트 정의로 렌더링하기 (`<script setup>`을 사용하는 Composition API):\n\n  ```vue\n  <script setup>\n  import Foo from './Foo.vue'\n  import Bar from './Bar.vue'\n  </script>\n\n  <template>\n    <component :is=\"Math.random() > 0.5 ? Foo : Bar\" />\n  </template>\n  ```\n\n  HTML 엘리먼트 렌더링하기:\n\n  ```html\n  <component :is=\"href ? 'a' : 'span'\"></component>\n  ```\n\n  [내장 컴포넌트](./built-in-components)도 모두 `is`에 전달할 수 있지만, 이름으로 전달하려면 반드시 등록해야 합니다. 예를 들어:\n\n  ```vue\n  <script>\n  import { Transition, TransitionGroup } from 'vue'\n\n  export default {\n    components: {\n      Transition,\n      TransitionGroup\n    }\n  }\n  </script>\n\n  <template>\n    <component :is=\"isGroup ? 'TransitionGroup' : 'Transition'\">\n      ...\n    </component>\n  </template>\n  ```\n\n  컴포넌트 자체를 `is`에 전달하는 경우(예: `<script setup>`에서)는 등록이 필요하지 않습니다.\n\n  `<component>` 태그에 `v-model`을 사용할 경우, 템플릿 컴파일러는 이를 `modelValue` prop과 `update:modelValue` 이벤트 리스너로 확장합니다. 이는 다른 컴포넌트와 마찬가지입니다. 하지만, 이는 `<input>`이나 `<select>`와 같은 네이티브 HTML 엘리먼트와는 호환되지 않습니다. 따라서, 동적으로 생성된 네이티브 엘리먼트에 `v-model`을 사용하는 것은 동작하지 않습니다:\n\n  ```vue\n  <script setup>\n  import { ref } from 'vue'\n\n  const tag = ref('input')\n  const username = ref('')\n  </script>\n\n  <template>\n    <!-- 'input'이 네이티브 HTML 엘리먼트이므로 동작하지 않습니다 -->\n    <component :is=\"tag\" v-model=\"username\" />\n  </template>\n  ```\n\n  실제로 이와 같은 예외적인 경우는 드물며, 네이티브 폼 필드는 실제 애플리케이션에서 보통 컴포넌트로 감싸서 사용합니다. 만약 네이티브 엘리먼트를 직접 사용해야 한다면, `v-model`을 속성과 이벤트로 수동 분리하여 사용할 수 있습니다.\n\n- **관련 문서** [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)\n"
      },
      "attributes": [],
      "references": "api/built-in-special-elements.html#component"
    },
    {
      "name": "slot",
      "description": {
        "kind": "markdown",
        "value": "\n템플릿에서 슬롯 콘텐츠의 출력 위치를 나타냅니다.\n\n- **Props**\n\n  ```ts\n  interface SlotProps {\n    /**\n     * <slot>에 전달된 모든 prop은\n     * 스코프 슬롯의 인자로 전달됩니다\n     */\n    [key: string]: any\n    /**\n     * 슬롯 이름을 지정할 때 사용됩니다.\n     */\n    name?: string\n  }\n  ```\n\n- **상세 설명**\n\n  `<slot>` 엘리먼트는 `name` 속성을 사용하여 슬롯 이름을 지정할 수 있습니다. `name`이 지정되지 않으면 기본 슬롯이 렌더링됩니다. 슬롯 엘리먼트에 전달된 추가 속성들은 부모에서 정의된 스코프 슬롯에 슬롯 prop으로 전달됩니다.\n\n  해당 엘리먼트 자체는 일치하는 슬롯 콘텐츠로 대체됩니다.\n\n  Vue 템플릿의 `<slot>` 엘리먼트는 자바스크립트로 컴파일되므로, [네이티브 `<slot>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)와 혼동하지 마세요.\n\n- **관련 문서** [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)\n"
      },
      "attributes": [],
      "references": "api/built-in-special-elements.html#slot"
    },
    {
      "name": "template",
      "description": {
        "kind": "markdown",
        "value": "\n`<template>` 태그는 DOM에 엘리먼트를 렌더링하지 않고 내장 디렉티브를 사용하고 싶을 때 플레이스홀더로 사용됩니다.\n\n- **상세 설명**\n\n  `<template>`에 대한 특별한 처리는 다음 디렉티브 중 하나와 함께 사용될 때만 적용됩니다:\n\n  - `v-if`, `v-else-if`, 또는 `v-else`\n  - `v-for`\n  - `v-slot`\n\n  이들 디렉티브가 없으면 [네이티브 `<template>` 엘리먼트](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template)로 렌더링됩니다.\n\n  `v-for`가 있는 `<template>`에는 [`key` 속성](https://ko.vuejs.org/api/built-in-special-attributes.html#key)을 사용할 수 있습니다. 그 외의 모든 속성과 디렉티브는 해당 엘리먼트가 없으면 의미가 없으므로 무시됩니다.\n\n  싱글 파일 컴포넌트는 전체 템플릿을 감싸기 위해 [최상위 `<template>` 태그](https://ko.vuejs.org/api/sfc-spec.html#language-blocks)를 사용합니다. 이 사용법은 위에서 설명한 `<template>`의 사용과는 별개입니다. 최상위 태그는 템플릿 자체의 일부가 아니며, 디렉티브와 같은 템플릿 문법을 지원하지 않습니다.\n\n- **관련 문서**\n  - [가이드 - `<template>`에서의 `v-if`](https://ko.vuejs.org/guide/essentials/conditional.html#v-if-on-template)\n  - [가이드 - `<template>`에서의 `v-for`](https://ko.vuejs.org/guide/essentials/list.html#v-for-on-template)\n  - [가이드 - 네임드 슬롯](https://ko.vuejs.org/guide/components/slots.html#named-slots)\n"
      },
      "attributes": [],
      "references": "api/built-in-special-elements.html#template"
    }
  ],
  "globalAttributes": [
    {
      "name": "v-text",
      "description": {
        "kind": "markdown",
        "value": "요소의 텍스트 콘텐츠를 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n  `v-text`는 요소의 [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent) 속성을 설정하여 동작하므로, 요소 내부의 기존 콘텐츠를 모두 덮어씁니다. `textContent`의 일부만 업데이트해야 한다면 [머스태시 보간법](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)을 대신 사용해야 합니다.\n\n- **예시**\n\n  ```html\n  <span v-text=\"msg\"></span>\n  <!-- 아래와 동일 -->\n  <span>{{msg}}</span>\n  ```\n\n- **참고** [템플릿 문법 - 텍스트 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)"
      },
      "references": "api/built-in-directives.html#v-text"
    },
    {
      "name": "v-html",
      "description": {
        "kind": "markdown",
        "value": "요소의 [innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)을 업데이트합니다.\n\n- **기대값:** `string`\n\n- **세부사항**\n\n  `v-html`의 내용은 일반 HTML로 삽입되며, Vue 템플릿 문법은 처리되지 않습니다. `v-html`을 사용해 템플릿을 조합하려고 한다면, 대신 컴포넌트를 사용하는 방식으로 해결책을 다시 생각해보세요.\n\n  ::: warning 보안 주의\n  웹사이트에서 임의의 HTML을 동적으로 렌더링하는 것은 매우 위험할 수 있습니다. 이는 쉽게 [XSS 공격](https://en.wikipedia.org/wiki/Cross-site_scripting)으로 이어질 수 있기 때문입니다. 신뢰할 수 있는 콘텐츠에만 `v-html`을 사용하고, **절대** 사용자로부터 제공된 콘텐츠에는 사용하지 마세요.\n  :::\n\n  [싱글 파일 컴포넌트](https://ko.vuejs.org/guide/scaling-up/sfc.html)에서는, `scoped` 스타일이 `v-html` 내부의 콘텐츠에는 적용되지 않습니다. 이는 해당 HTML이 Vue의 템플릿 컴파일러에 의해 처리되지 않기 때문입니다. `v-html` 콘텐츠에 scoped CSS를 적용하려면 [CSS 모듈](./sfc-css-features#css-modules)이나 BEM과 같은 수동 스코핑 전략을 가진 추가적인 전역 `<style>` 요소를 사용할 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-html=\"html\"></div>\n  ```\n\n- **참고** [템플릿 문법 - Raw HTML](https://ko.vuejs.org/guide/essentials/template-syntax.html#raw-html)"
      },
      "references": "api/built-in-directives.html#v-html"
    },
    {
      "name": "v-show",
      "description": {
        "kind": "markdown",
        "value": "표현식 값의 참/거짓에 따라 요소의 표시 여부를 토글합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  `v-show`는 인라인 스타일을 통해 `display` CSS 속성을 설정하여 동작하며, 요소가 보일 때 초기 `display` 값을 최대한 존중합니다. 또한 조건이 변경될 때 트랜지션을 트리거합니다.\n\n- **참고** [조건부 렌더링 - v-show](https://ko.vuejs.org/guide/essentials/conditional.html#v-show)"
      },
      "references": "api/built-in-directives.html#v-show"
    },
    {
      "name": "v-if",
      "description": {
        "kind": "markdown",
        "value": "표현식 값의 참/거짓에 따라 요소 또는 템플릿 조각을 조건부로 렌더링합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  `v-if` 요소가 토글될 때, 해당 요소와 그 안의 디렉티브/컴포넌트는 파괴되고 다시 생성됩니다. 초기 조건이 거짓이라면 내부 콘텐츠는 전혀 렌더링되지 않습니다.\n\n  `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n  이 디렉티브는 조건이 변경될 때 트랜지션을 트리거합니다.\n\n  함께 사용할 때, `v-if`가 `v-for`보다 우선순위가 높습니다. 이 두 디렉티브를 하나의 요소에 함께 사용하는 것은 권장하지 않습니다. 자세한 내용은 [리스트 렌더링 가이드](https://ko.vuejs.org/guide/essentials/list.html#v-for-with-v-if)를 참고하세요.\n\n- **참고** [조건부 렌더링 - v-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-if)"
      },
      "references": "api/built-in-directives.html#v-if"
    },
    {
      "name": "v-else",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "`v-if` 또는 `v-if` / `v-else-if` 체인의 \"else 블록\"을 나타냅니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-if=\"Math.random() > 0.5\">\n    Now you see me\n  </div>\n  <div v-else>\n    Now you don't\n  </div>\n  ```\n\n- **참고** [조건부 렌더링 - v-else](https://ko.vuejs.org/guide/essentials/conditional.html#v-else)"
      },
      "references": "api/built-in-directives.html#v-else"
    },
    {
      "name": "v-else-if",
      "description": {
        "kind": "markdown",
        "value": "`v-if`의 \"else if 블록\"을 나타냅니다. 체이닝이 가능합니다.\n\n- **기대값:** `any`\n\n- **세부사항**\n\n  - 제한: 이전 형제 요소에 `v-if` 또는 `v-else-if`가 있어야 합니다.\n\n  - `<template>`에 사용할 수 있어, 텍스트만 포함하거나 여러 요소를 포함하는 조건부 블록을 나타낼 수 있습니다.\n\n- **예시**\n\n  ```html\n  <div v-if=\"type === 'A'\">\n    A\n  </div>\n  <div v-else-if=\"type === 'B'\">\n    B\n  </div>\n  <div v-else-if=\"type === 'C'\">\n    C\n  </div>\n  <div v-else>\n    Not A/B/C\n  </div>\n  ```\n\n- **참고** [조건부 렌더링 - v-else-if](https://ko.vuejs.org/guide/essentials/conditional.html#v-else-if)"
      },
      "references": "api/built-in-directives.html#v-else-if"
    },
    {
      "name": "v-for",
      "description": {
        "kind": "markdown",
        "value": "소스 데이터를 기반으로 요소 또는 템플릿 블록을 여러 번 렌더링합니다.\n\n- **기대값:** `Array | Object | number | string | Iterable`\n\n- **세부사항**\n\n  디렉티브의 값은 현재 반복 중인 요소에 대한 별칭을 제공하기 위해 `alias in expression`이라는 특수 문법을 사용해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\">\n    {{ item.text }}\n  </div>\n  ```\n\n  또는, 인덱스(또는 객체에서 사용할 경우 키)에 대한 별칭도 지정할 수 있습니다:\n\n  ```html\n  <div v-for=\"(item, index) in items\"></div>\n  <div v-for=\"(value, key) in object\"></div>\n  <div v-for=\"(value, name, index) in object\"></div>\n  ```\n\n  `v-for`의 기본 동작은 요소를 제자리에서 패치하려고 시도하며, 이동시키지 않습니다. 요소의 순서를 강제로 재정렬하려면 `key` 특수 속성으로 정렬 힌트를 제공해야 합니다:\n\n  ```html\n  <div v-for=\"item in items\" :key=\"item.id\">\n    {{ item.text }}\n  </div>\n  ```\n\n  `v-for`는 [이터러블 프로토콜](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)을 구현한 값(네이티브 `Map` 및 `Set` 포함)에도 사용할 수 있습니다.\n\n- **참고**\n  - [리스트 렌더링](https://ko.vuejs.org/guide/essentials/list.html)"
      },
      "references": "api/built-in-directives.html#v-for"
    },
    {
      "name": "v-on",
      "description": {
        "kind": "markdown",
        "value": "요소에 이벤트 리스너를 연결합니다.\n\n- **축약형:** `@`\n\n- **기대값:** `Function | 인라인 문장 | Object (인자 없이)`\n\n- **인자:** `event` (Object 문법 사용 시 선택)\n\n- **수식어**\n\n  - `.stop` - `event.stopPropagation()` 호출\n  - `.prevent` - `event.preventDefault()` 호출\n  - `.capture` - 캡처 모드로 이벤트 리스너 추가\n  - `.self` - 이벤트가 이 요소에서 발생한 경우에만 핸들러 트리거\n  - `.{keyAlias}` - 특정 키에서만 핸들러 트리거\n  - `.once` - 핸들러를 최대 한 번만 트리거\n  - `.left` - 마우스 왼쪽 버튼 이벤트에서만 핸들러 트리거\n  - `.right` - 마우스 오른쪽 버튼 이벤트에서만 핸들러 트리거\n  - `.middle` - 마우스 가운데 버튼 이벤트에서만 핸들러 트리거\n  - `.passive` - `{ passive: true }`로 DOM 이벤트 연결\n\n- **세부사항**\n\n  이벤트 타입은 인자로 표시됩니다. 표현식은 메서드 이름, 인라인 문장, 또는 수식어가 있을 경우 생략할 수 있습니다.\n\n  일반 요소에 사용하면 [**네이티브 DOM 이벤트**](https://developer.mozilla.org/en-US/docs/Web/Events)만 리스닝합니다. 커스텀 엘리먼트 컴포넌트에 사용하면 해당 자식 컴포넌트에서 발생한 **커스텀 이벤트**를 리스닝합니다.\n\n  네이티브 DOM 이벤트를 리스닝할 때, 메서드는 네이티브 이벤트를 유일한 인자로 받습니다. 인라인 문장을 사용할 경우, 특별한 `$event` 속성에 접근할 수 있습니다: `v-on:click=\"handle('ok', $event)\"`.\n\n  `v-on`은 인자 없이 이벤트/리스너 쌍의 객체에 바인딩하는 것도 지원합니다. 객체 문법을 사용할 때는 수식어를 지원하지 않습니다.\n\n- **예시**\n\n  ```html\n  <!-- 메서드 핸들러 -->\n  <button v-on:click=\"doThis\"></button>\n\n  <!-- 동적 이벤트 -->\n  <button v-on:[event]=\"doThis\"></button>\n\n  <!-- 인라인 문장 -->\n  <button v-on:click=\"doThat('hello', $event)\"></button>\n\n  <!-- 축약형 -->\n  <button @click=\"doThis\"></button>\n\n  <!-- 축약형 동적 이벤트 -->\n  <button @[event]=\"doThis\"></button>\n\n  <!-- 이벤트 전파 중지 -->\n  <button @click.stop=\"doThis\"></button>\n\n  <!-- 기본 동작 방지 -->\n  <button @click.prevent=\"doThis\"></button>\n\n  <!-- 표현식 없이 기본 동작 방지 -->\n  <form @submit.prevent></form>\n\n  <!-- 수식어 체이닝 -->\n  <button @click.stop.prevent=\"doThis\"></button>\n\n  <!-- keyAlias를 사용한 키 수식어 -->\n  <input @keyup.enter=\"onEnter\" />\n\n  <!-- 클릭 이벤트가 최대 한 번만 트리거됨 -->\n  <button v-on:click.once=\"doThis\"></button>\n\n  <!-- 객체 문법 -->\n  <button v-on=\"{ mousedown: doThis, mouseup: doThat }\"></button>\n  ```\n\n  자식 컴포넌트에서 커스텀 이벤트를 리스닝(자식에서 \"my-event\"가 emit될 때 핸들러가 호출됨):\n\n  ```html\n  <MyComponent @my-event=\"handleThis\" />\n\n  <!-- 인라인 문장 -->\n  <MyComponent @my-event=\"handleThis(123, $event)\" />\n  ```\n\n- **참고**\n  - [이벤트 핸들링](https://ko.vuejs.org/guide/essentials/event-handling.html)\n  - [컴포넌트 - 커스텀 이벤트](https://ko.vuejs.org/guide/essentials/component-basics.html#listening-to-events)"
      },
      "references": "api/built-in-directives.html#v-on"
    },
    {
      "name": "v-bind",
      "description": {
        "kind": "markdown",
        "value": "하나 이상의 속성 또는 컴포넌트 prop을 표현식에 동적으로 바인딩합니다.\n\n- **축약형:**\n  - `:` 또는 `.` (`.prop` 수식어 사용 시)\n  - 값 생략(속성과 바인딩 값의 이름이 같을 때, 3.4+ 필요)\n\n- **기대값:** `any (인자 사용 시) | Object (인자 없이)`\n\n- **인자:** `attrOrProp (선택)`\n\n- **수식어**\n\n  - `.camel` - 케밥 케이스 속성명을 camelCase로 변환\n  - `.prop` - 바인딩을 DOM 속성으로 강제 설정 (3.2+)\n  - `.attr` - 바인딩을 DOM 속성으로 강제 설정 (3.2+)\n\n- **사용법**\n\n  `class` 또는 `style` 속성에 바인딩할 때, `v-bind`는 Array 또는 Object와 같은 추가 값 타입을 지원합니다. 자세한 내용은 아래 가이드 섹션을 참고하세요.\n\n  요소에 바인딩을 설정할 때, Vue는 기본적으로 `in` 연산자 체크를 통해 해당 키가 속성으로 정의되어 있는지 확인합니다. 속성이 정의되어 있으면, Vue는 값을 속성이 아닌 DOM 속성으로 설정합니다. 대부분의 경우 이 방식이 잘 동작하지만, `.prop` 또는 `.attr` 수식어를 명시적으로 사용하여 이 동작을 오버라이드할 수 있습니다. 특히 [커스텀 엘리먼트 작업 시](https://ko.vuejs.org/guide/extras/web-components.html#passing-dom-properties) 필요할 수 있습니다.\n\n  컴포넌트 prop 바인딩에 사용할 때, prop은 자식 컴포넌트에서 올바르게 선언되어 있어야 합니다.\n\n  인자 없이 사용할 경우, 속성명-값 쌍을 포함하는 객체를 바인딩할 수 있습니다.\n\n- **예시**\n\n  ```html\n  <!-- 속성 바인딩 -->\n  <img v-bind:src=\"imageSrc\" />\n\n  <!-- 동적 속성명 -->\n  <button v-bind:[key]=\"value\"></button>\n\n  <!-- 축약형 -->\n  <img :src=\"imageSrc\" />\n\n  <!-- 동일 이름 축약형 (3.4+), :src=\"src\"로 확장됨 -->\n  <img :src />\n\n  <!-- 축약형 동적 속성명 -->\n  <button :[key]=\"value\"></button>\n\n  <!-- 인라인 문자열 연결 -->\n  <img :src=\"'/path/to/images/' + fileName\" />\n\n  <!-- 클래스 바인딩 -->\n  <div :class=\"{ red: isRed }\"></div>\n  <div :class=\"[classA, classB]\"></div>\n  <div :class=\"[classA, { classB: isB, classC: isC }]\"></div>\n\n  <!-- 스타일 바인딩 -->\n  <div :style=\"{ fontSize: size + 'px' }\"></div>\n  <div :style=\"[styleObjectA, styleObjectB]\"></div>\n\n  <!-- 속성 객체 바인딩 -->\n  <div v-bind=\"{ id: someProp, 'other-attr': otherProp }\"></div>\n\n  <!-- prop 바인딩. \"prop\"은 자식 컴포넌트에서 선언되어야 함 -->\n  <MyComponent :prop=\"someThing\" />\n\n  <!-- 부모와 자식 컴포넌트에서 공통된 prop 전달 -->\n  <MyComponent v-bind=\"$props\" />\n\n  <!-- XLink -->\n  <svg><a :xlink:special=\"foo\"></a></svg>\n  ```\n\n  `.prop` 수식어는 전용 축약형 `.`도 있습니다:\n\n  ```html\n  <div :someProperty.prop=\"someObject\"></div>\n\n  <!-- 아래와 동일 -->\n  <div .someProperty=\"someObject\"></div>\n  ```\n\n  `.camel` 수식어는 in-DOM 템플릿에서 `v-bind` 속성명을 camelCase로 변환할 수 있습니다. 예: SVG `viewBox` 속성\n\n  ```html\n  <svg :view-box.camel=\"viewBox\"></svg>\n  ```\n\n  `.camel`은 문자열 템플릿을 사용하거나, 빌드 단계에서 템플릿을 미리 컴파일하는 경우 필요하지 않습니다.\n\n- **참고**\n  - [클래스 및 스타일 바인딩](https://ko.vuejs.org/guide/essentials/class-and-style.html)\n  - [컴포넌트 - Prop 전달 세부사항](https://ko.vuejs.org/guide/components/props.html#prop-passing-details)"
      },
      "references": "api/built-in-directives.html#v-bind"
    },
    {
      "name": "v-model",
      "description": {
        "kind": "markdown",
        "value": "폼 입력 요소 또는 컴포넌트에서 양방향 바인딩을 생성합니다.\n\n- **기대값:** 폼 입력 요소의 값 또는 컴포넌트의 출력에 따라 다름\n\n- **제한:**\n\n  - `<input>`\n  - `<select>`\n  - `<textarea>`\n  - 컴포넌트\n\n- **수식어**\n\n  - [`.lazy`](https://ko.vuejs.org/guide/essentials/forms.html#lazy) - `input` 대신 `change` 이벤트 리스닝\n  - [`.number`](https://ko.vuejs.org/guide/essentials/forms.html#number) - 유효한 입력 문자열을 숫자로 변환\n  - [`.trim`](https://ko.vuejs.org/guide/essentials/forms.html#trim) - 입력값 트림\n\n- **참고**\n\n  - [폼 입력 바인딩](https://ko.vuejs.org/guide/essentials/forms.html)\n  - [컴포넌트 이벤트 - `v-model`과 함께 사용](https://ko.vuejs.org/guide/components/v-model.html)"
      },
      "references": "api/built-in-directives.html#v-model"
    },
    {
      "name": "v-slot",
      "description": {
        "kind": "markdown",
        "value": "props를 받을 것으로 예상되는 명명된 슬롯 또는 스코프 슬롯을 나타냅니다.\n\n- **축약형:** `#`\n\n- **기대값:** 함수 인자 위치에서 유효한 JavaScript 표현식(구조 분해 지원 포함). 선택 사항 - 슬롯에 props가 전달될 것으로 예상될 때만 필요.\n\n- **인자:** 슬롯 이름(선택, 기본값은 `default`)\n\n- **제한:**\n\n  - `<template>`\n  - [컴포넌트](https://ko.vuejs.org/guide/components/slots.html#scoped-slots) (props가 있는 단일 기본 슬롯의 경우)\n\n- **예시**\n\n  ```html\n  <!-- 명명된 슬롯 -->\n  <BaseLayout>\n    <template v-slot:header>\n      Header content\n    </template>\n\n    <template v-slot:default>\n      Default slot content\n    </template>\n\n    <template v-slot:footer>\n      Footer content\n    </template>\n  </BaseLayout>\n\n  <!-- props를 받는 명명된 슬롯 -->\n  <InfiniteScroll>\n    <template v-slot:item=\"slotProps\">\n      <div class=\"item\">\n        {{ slotProps.item.text }}\n      </div>\n    </template>\n  </InfiniteScroll>\n\n  <!-- 구조 분해와 함께 props를 받는 기본 슬롯 -->\n  <Mouse v-slot=\"{ x, y }\">\n    Mouse position: {{ x }}, {{ y }}\n  </Mouse>\n  ```\n\n- **참고**\n  - [컴포넌트 - 슬롯](https://ko.vuejs.org/guide/components/slots.html)"
      },
      "references": "api/built-in-directives.html#v-slot"
    },
    {
      "name": "v-pre",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "이 요소와 모든 자식에 대한 컴파일을 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  `v-pre`가 있는 요소 내부에서는 모든 Vue 템플릿 문법이 그대로 보존되어 렌더링됩니다. 가장 일반적인 사용 사례는 원시 머스태시 태그를 표시하는 것입니다.\n\n- **예시**\n\n  ```html\n  <span v-pre>{{ this will not be compiled }}</span>\n  ```"
      },
      "references": "api/built-in-directives.html#v-pre"
    },
    {
      "name": "v-once",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "요소와 컴포넌트를 한 번만 렌더링하고, 이후 업데이트를 건너뜁니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  이후 다시 렌더링될 때, 해당 요소/컴포넌트와 모든 자식은 정적 콘텐츠로 간주되어 건너뜁니다. 이는 업데이트 성능을 최적화하는 데 사용할 수 있습니다.\n\n  ```html\n  <!-- 단일 요소 -->\n  <span v-once>This will never change: {{msg}}</span>\n  <!-- 자식이 있는 요소 -->\n  <div v-once>\n    <h1>Comment</h1>\n    <p>{{msg}}</p>\n  </div>\n  <!-- 컴포넌트 -->\n  <MyComponent v-once :comment=\"msg\"></MyComponent>\n  <!-- `v-for` 디렉티브 -->\n  <ul>\n    <li v-for=\"i in list\" v-once>{{i}}</li>\n  </ul>\n  ```\n\n  3.2부터는 [`v-memo`](#v-memo)를 사용해 무효화 조건과 함께 템플릿의 일부를 메모이즈할 수도 있습니다.\n\n- **참고**\n  - [데이터 바인딩 문법 - 보간](https://ko.vuejs.org/guide/essentials/template-syntax.html#text-interpolation)\n  - [v-memo](#v-memo)"
      },
      "references": "api/built-in-directives.html#v-once"
    },
    {
      "name": "v-memo",
      "description": {
        "kind": "markdown",
        "value": "- 3.2+에서만 지원\n\n- **기대값:** `any[]`\n\n- **세부사항**\n\n  템플릿의 서브 트리를 메모이즈합니다. 요소와 컴포넌트 모두에 사용할 수 있습니다. 디렉티브는 메모이제이션을 위해 비교할 고정 길이의 의존성 값 배열을 기대합니다. 배열의 모든 값이 마지막 렌더와 동일하다면, 전체 서브 트리에 대한 업데이트가 건너뜁니다. 예를 들어:\n\n  ```html\n  <div v-memo=\"[valueA, valueB]\">\n    ...\n  </div>\n  ```\n\n  컴포넌트가 다시 렌더링될 때, `valueA`와 `valueB`가 모두 동일하다면 이 `<div>`와 그 자식에 대한 모든 업데이트가 건너뜁니다. 실제로, 메모이즈된 서브 트리의 복사본을 재사용할 수 있으므로 Virtual DOM VNode 생성조차도 건너뜁니다.\n\n  메모이제이션 배열을 올바르게 지정하는 것이 중요합니다. 그렇지 않으면 실제로 적용되어야 할 업데이트를 건너뛸 수 있습니다. 의존성 배열이 비어있는 `v-memo=\"[]\"`는 기능적으로 `v-once`와 동일합니다.\n\n  **`v-for`와 함께 사용하기**\n\n  `v-memo`는 성능이 중요한 시나리오에서 마이크로 최적화를 위해 제공되며, 거의 필요하지 않습니다. 가장 일반적인 활용 사례는 대용량 `v-for` 리스트(길이 > 1000)를 렌더링할 때입니다:\n\n  ```html\n  <div v-for=\"item in list\" :key=\"item.id\" v-memo=\"[item.id === selected]\">\n    <p>ID: {{ item.id }} - selected: {{ item.id === selected }}</p>\n    <p>...more child nodes</p>\n  </div>\n  ```\n\n  컴포넌트의 `selected` 상태가 변경될 때, 대부분의 항목이 동일하더라도 많은 VNode가 생성됩니다. 여기서 `v-memo` 사용은 \"이 항목이 선택됨/해제됨으로 변경된 경우에만 업데이트하라\"는 의미입니다. 영향을 받지 않은 항목은 이전 VNode를 재사용하여 diffing을 완전히 건너뜁니다. 이때, Vue가 항목의 `:key`에서 자동으로 추론하므로 memo 의존성 배열에 `item.id`를 포함할 필요는 없습니다.\n\n  :::warning\n  `v-memo`를 `v-for`와 함께 사용할 때는 반드시 같은 요소에 사용해야 합니다. **`v-memo`는 `v-for` 내부에서는 동작하지 않습니다.**\n  :::\n\n  `v-memo`는 자식 컴포넌트 업데이트 체크가 비최적화된 특정 엣지 케이스에서 원치 않는 업데이트를 수동으로 방지하는 데도 사용할 수 있습니다. 하지만, 필요한 업데이트가 건너뛰어지지 않도록 올바른 의존성 배열을 지정하는 것은 개발자의 책임입니다.\n\n- **참고**\n  - [v-once](#v-once)"
      },
      "references": "api/built-in-directives.html#v-memo"
    },
    {
      "name": "v-cloak",
      "valueSet": "v",
      "description": {
        "kind": "markdown",
        "value": "컴파일되지 않은 템플릿을 준비될 때까지 숨기는 데 사용됩니다.\n\n- **표현식 없음**\n\n- **세부사항**\n\n  **이 디렉티브는 빌드 단계가 없는 환경에서만 필요합니다.**\n\n  in-DOM 템플릿을 사용할 때, \"컴파일되지 않은 템플릿의 깜빡임\"이 발생할 수 있습니다. 즉, 마운트된 컴포넌트가 렌더링된 콘텐츠로 교체되기 전까지 사용자가 원시 머스태시 태그를 볼 수 있습니다.\n\n  `v-cloak`는 관련 컴포넌트 인스턴스가 마운트될 때까지 요소에 남아 있습니다. `[v-cloak] { display: none }`과 같은 CSS 규칙과 결합하여, 컴포넌트가 준비될 때까지 원시 템플릿을 숨기는 데 사용할 수 있습니다.\n\n- **예시**\n\n  ```css\n  [v-cloak] {\n    display: none;\n  }\n  ```\n\n  ```html\n  <div v-cloak>\n    {{ message }}\n  </div>\n  ```\n\n  컴파일이 완료될 때까지 `<div>`는 보이지 않습니다."
      },
      "references": "api/built-in-directives.html#v-cloak"
    },
    {
      "name": "key",
      "description": {
        "kind": "markdown",
        "value": "`key` 특수 속성은 주로 Vue의 가상 DOM 알고리즘이 새로운 노드 목록과 이전 노드 목록을 비교(diffing)할 때 vnode를 식별하는 힌트로 사용됩니다.\n\n- **기대값:** `number | string | symbol`\n\n- **세부사항**\n\n  key가 없으면, Vue는 요소의 이동을 최소화하고 같은 타입의 요소를 최대한 제자리에서 패치/재사용하려는 알고리즘을 사용합니다. key가 있으면, key의 순서 변경에 따라 요소를 재정렬하고, 더 이상 존재하지 않는 key를 가진 요소는 항상 제거/파괴됩니다.\n\n  동일한 공통 부모를 가진 자식들은 **고유한 key**를 가져야 합니다. 중복된 key는 렌더링 오류를 일으킵니다.\n\n  가장 일반적인 사용 사례는 `v-for`와 결합하는 것입니다:\n\n  ```html\n  <ul>\n    <li v-for=\"item in items\" :key=\"item.id\">...</li>\n  </ul>\n  ```\n\n  또한 요소/컴포넌트의 재사용 대신 교체를 강제로 할 때 사용할 수 있습니다. 이는 다음과 같은 경우에 유용할 수 있습니다:\n\n  - 컴포넌트의 라이프사이클 훅을 제대로 트리거하고 싶을 때\n  - 트랜지션을 트리거하고 싶을 때\n\n  예를 들어:\n\n  ```html\n  <transition>\n    <span :key=\"text\">{{ text }}</span>\n  </transition>\n  ```\n\n  `text`가 변경되면, `<span>`은 항상 패치되는 대신 교체되어 트랜지션이 트리거됩니다.\n\n- **관련 문서** [가이드 - 리스트 렌더링 - `key`로 상태 유지하기](https://ko.vuejs.org/guide/essentials/list.html#maintaining-state-with-key)"
      },
      "references": "api/built-in-special-attributes.html#key"
    },
    {
      "name": "ref",
      "description": {
        "kind": "markdown",
        "value": "[템플릿 ref](https://ko.vuejs.org/guide/essentials/template-refs.html)를 나타냅니다.\n\n- **기대값:** `string | Function`\n\n- **세부사항**\n\n  `ref`는 요소나 자식 컴포넌트에 대한 참조를 등록하는 데 사용됩니다.\n\n  옵션 API에서는 참조가 컴포넌트의 `this.$refs` 객체에 등록됩니다:\n\n  ```html\n  <!-- this.$refs.p로 저장됨 -->\n  <p ref=\"p\">hello</p>\n  ```\n\n  컴포지션 API에서는 참조가 동일한 이름의 ref에 저장됩니다:\n\n  ```vue\n  <script setup>\n  import { useTemplateRef } from 'vue'\n\n  const pRef = useTemplateRef('p')\n  </script>\n\n  <template>\n    <p ref=\"p\">hello</p>\n  </template>\n  ```\n\n  일반 DOM 요소에 사용하면 참조는 해당 요소가 되고, 자식 컴포넌트에 사용하면 참조는 자식 컴포넌트 인스턴스가 됩니다.\n\n  또는 `ref`는 함수 값을 받아 참조를 어디에 저장할지 완전히 제어할 수 있습니다:\n\n  ```html\n  <ChildComponent :ref=\"(el) => child = el\" />\n  ```\n\n  ref 등록 타이밍에 대한 중요한 참고 사항: ref 자체는 렌더 함수의 결과로 생성되기 때문에, 컴포넌트가 마운트될 때까지 참조에 접근해서는 안 됩니다.\n\n  `this.$refs`는 반응형이 아니므로, 데이터 바인딩을 위해 템플릿에서 사용하려고 해서는 안 됩니다.\n\n- **관련 문서**\n  - [가이드 - 템플릿 ref](https://ko.vuejs.org/guide/essentials/template-refs.html)\n  - [가이드 - 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-template-refs) <sup class=\"vt-badge ts\" />\n  - [가이드 - 컴포넌트 템플릿 ref 타입 지정](https://ko.vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs) <sup class=\"vt-badge ts\" />"
      },
      "references": "api/built-in-special-attributes.html#ref"
    },
    {
      "name": "is",
      "description": {
        "kind": "markdown",
        "value": "[동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components) 바인딩에 사용됩니다.\n\n- **기대값:** `string | Component`\n\n- **네이티브 요소에서의 사용**\n \n  - 3.1+에서만 지원됩니다\n\n  `is` 속성이 네이티브 HTML 요소에 사용되면, [커스터마이즈드 내장 요소](https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-customized-builtin-example)로 해석되며, 이는 웹 플랫폼의 네이티브 기능입니다.\n\n  하지만 [in-DOM 템플릿 파싱 주의사항](https://ko.vuejs.org/guide/essentials/component-basics.html#in-dom-template-parsing-caveats)에서 설명한 것처럼, 네이티브 요소를 Vue 컴포넌트로 대체해야 할 필요가 있을 수 있습니다. 이 경우 `is` 속성 값 앞에 `vue:`를 붙이면 Vue가 해당 요소를 Vue 컴포넌트로 렌더링합니다:\n\n  ```html\n  <table>\n    <tr is=\"vue:my-row-component\"></tr>\n  </table>\n  ```\n\n- **관련 문서**\n\n  - [내장 특수 요소 - `<component>`](https://ko.vuejs.org/api/built-in-special-elements.html#component)\n  - [동적 컴포넌트](https://ko.vuejs.org/guide/essentials/component-basics.html#dynamic-components)"
      },
      "references": "api/built-in-special-attributes.html#is"
    },
    {
      "name": "data-allow-mismatch",
      "description": {
        "kind": "markdown",
        "value": "[하이드레이션 불일치](https://ko.vuejs.org/guide/scaling-up/ssr.html#hydration-mismatch) 경고를 억제하는 데 사용할 수 있는 특수 속성입니다.\n\n- **예시**\n\n  ```html\n  <div data-allow-mismatch=\"text\">{{ data.toLocaleString() }}</div>\n  ```\n\n  값은 허용되는 불일치 유형을 특정 타입으로 제한할 수 있습니다. 허용되는 값은 다음과 같습니다:\n\n  - `text`\n  - `children` (직접 자식에 대한 불일치만 허용)\n  - `class`\n  - `style`\n  - `attribute`\n\n  값을 제공하지 않으면 모든 유형의 불일치가 허용됩니다.\n"
      },
      "references": "api/ssr.html#data-allow-mismatch"
    }
  ]
}