---
title: "Vue.js에서 v-model과 model-value의 반응성 차이 - 근심을 잊는 한 장"
description: "Vue.js의 v-model과 model-value는 모두 폼 데이터의 양방향 바인딩을 구현하는 데 사용되는 지시문입니다."
canonical_url: "https://www.ikxin.com/ko/article/vue-model-reactivity"
last_updated: "2026-09-16T09:59:27.259Z"
locale: ko
meta:
  "og:description": "Vue.js의 v-model과 model-value는 모두 폼 데이터의 양방향 바인딩을 구현하는 데 사용되는 지시문입니다."
  "og:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpz7JeQ7IScIHYtbW9kZWzqs7wgbW9kZWwtdmFsdWXsnZgg67CY7J2R7ISxIOywqOydtCAtIOq3vOyLrOydhCDsnorripQg7ZWcIOyepQ%2Cc_Article%2Ctitle_~VnVlLmpz7JeQ7IScIHYtbW9kZWzqs7wgbW9kZWwtdmFsdWXsnZgg67CY7J2R7ISxIOywqOydtA%2Cdescription_~VnVlLmpz7J2YIHYtbW9kZWzqs7wgbW9kZWwtdmFsdWXripQg66qo65GQIO2PvCDrjbDsnbTthLDsnZgg7JaR67Cp7ZalIOuwlOyduOuUqeydhCDqtaztmITtlZjripQg642wIOyCrOyaqeuQmOuKlCDsp4Dsi5zrrLjsnoXri4jri6Qu%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_K7tVD8XsQ_pQYZSt.png"
  "og:image:alt": "Vue.js에서 v-model과 model-value의 반응성 차이 - 근심을 잊는 한 장"
  "og:image:height": "630"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Vue.js에서 v-model과 model-value의 반응성 차이"
  "twitter:image": "https://www.ikxin.com/_og/d/h_630%2Ca_~VnVlLmpz7JeQ7IScIHYtbW9kZWzqs7wgbW9kZWwtdmFsdWXsnZgg67CY7J2R7ISxIOywqOydtCAtIOq3vOyLrOydhCDsnorripQg7ZWcIOyepQ%2Cc_Article%2Ctitle_~VnVlLmpz7JeQ7IScIHYtbW9kZWzqs7wgbW9kZWwtdmFsdWXsnZgg67CY7J2R7ISxIOywqOydtA%2Cdescription_~VnVlLmpz7J2YIHYtbW9kZWzqs7wgbW9kZWwtdmFsdWXripQg66qo65GQIO2PvCDrjbDsnbTthLDsnZgg7JaR67Cp7ZalIOuwlOyduOuUqeydhCDqtaztmITtlZjripQg642wIOyCrOyaqeuQmOuKlCDsp4Dsi5zrrLjsnoXri4jri6Qu%2CsiteName_~6re87Ius7J2EIOyeiuuKlCDtlZwg7J6l%2CsiteHost_www.ikxin.com%2Cp_Ii9rby9hcnRpY2xlL3Z1ZS1tb2RlbC1yZWFjdGl2aXR5Ig%2Cs_K7tVD8XsQ_pQYZSt.png"
  "twitter:image:alt": "Vue.js에서 v-model과 model-value의 반응성 차이 - 근심을 잊는 한 장"
---

> Index of every page on this site: [llms.txt](https://www.ikxin.com/llms.txt)

# **Vue.js에서 v-model과 model-value의 반응성 차이**

2023.03.28 5,257  0

Vue.js의 `v-model`과 `model-value`는 모두 폼 데이터의 양방향 바인딩을 구현하는 데 사용되는 지시문입니다.

`v-model`은 Vue.js에서 제공하는 문법 설탕으로, 개발자가 템플릿에서 폼 데이터의 양방향 바인딩을 더 편리하게 구현할 수 있도록 합니다. 폼 요소에 `v-model`을 사용하면 요소의 `input` 또는 `change` 이벤트를 자동으로 감지하고, 폼 요소의 값을 해당 Vue 컴포넌트 데이터와 동기화하며 그 반대도 마찬가지입니다. 예를 들면 다음과 같습니다.

 HTML

```
<input v-model="message" />
```

이렇게 하면 폼 요소의 값과 Vue 인스턴스의 `message` 데이터가 양방향으로 바인딩됩니다. 사용자가 폼 요소에 값을 입력하면 `message` 데이터가 자동으로 업데이트되고, `message` 데이터가 변경되면 폼 요소의 값도 자동으로 업데이트됩니다.

`model-value`는 Vue 3에서 새롭게 추가된 속성으로, 사용자 정의 컴포넌트에서 폼 데이터의 양방향 바인딩을 구현하는 데 사용됩니다. `v-model`과 달리 `model-value`는 지시문이 아니라 속성이므로, 사용자 정의 컴포넌트의 옵션에서 구성해야 합니다. 예를 들면 다음과 같습니다.

 JavaScript

```
app.component('my-component', {
  props: {
    modelValue: String
  },
  emits: ['update:modelValue'],
  template: `
    <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" />
  `
})
```

여기서는 `my-component`라는 이름의 사용자 정의 컴포넌트를 정의하고, 해당 컴포넌트의 `props`에 `modelValue`라는 속성을 정의했습니다. 컴포넌트의 템플릿에서는 이 속성을 사용하여 폼 요소의 값 바인딩을 구현하고, 동시에 폼 요소의 `input` 이벤트에서 `update:modelValue`라는 사용자 정의 이벤트를 발생시켜 입력한 값을 매개변수로 부모 컴포넌트에 전달합니다. 이 사용자 정의 컴포넌트를 사용할 때는 다음과 같이 `v-model`을 사용하여 폼 데이터의 양방향 바인딩을 구현할 수 있습니다.

 HTML

```
<my-component v-model="message" />
```

정리하면, `v-model`은 Vue.js에서 폼 데이터의 양방향 바인딩을 구현하는 데 사용되는 일반적인 지시문이고, `model-value`는 사용자 정의 컴포넌트에서 폼 데이터의 양방향 바인딩을 구현하는 새로운 방식입니다.

## **댓글**

(0)

아직 댓글이 없습니다

## **댓글 작성**

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://www.ikxin.com/ko#website","@type":"WebSite","description":"근심을 잊는 한 장은 기술 탐구와 일상을 다루는 개인 웹사이트입니다. 웹 개발, 백엔드 및 DevOps 실무를 기록하고 소프트웨어 도구와 디지털 경험, 코드 밖의 견문과 생각을 나눕니다.","inLanguage":"ko-KR","name":"근심을 잊는 한 장","url":"https://www.ikxin.com/ko","translationOfWork":{"@id":"https://www.ikxin.com/#website"}},{"@id":"https://www.ikxin.com/ko/article/vue-model-reactivity#webpage","@type":"WebPage","description":"Vue.js의 v-model과 model-value는 모두 폼 데이터의 양방향 바인딩을 구현하는 데 사용되는 지시문입니다.","name":"Vue.js에서 v-model과 model-value의 반응성 차이","url":"https://www.ikxin.com/ko/article/vue-model-reactivity","isPartOf":{"@id":"https://www.ikxin.com/ko#website"},"potentialAction":[{"@type":"ReadAction","target":["https://www.ikxin.com/ko/article/vue-model-reactivity"]}]}]}
```

## Sitemap

See the full [sitemap](https://www.ikxin.com/sitemap.md) for all pages.