Vue.js v-model이란 무엇인가? (Feat.Vue2와 Vue3 비교)

'Vue.js의 가장 큰 장점이라고 할 수 있는 것이 무엇일까'라는 질문을 넌지시 던져보았을 때, 바로 떠오른 것은 바로 v-model 양방향 데이터 바인딩 디렉티브였다. 바로 어제 Vue.js + Chart.js를 활용하여 API Data를 조회하고 가공하여 화면단에 보여주는 작업을 마쳤다. 하지만 디자이너의 요청으로 버튼 클릭이벤트에서 input radio로  다시 말해 Button에서 Radio로 변경함에 따라 $emit을 통한 클릭 이벤트 전달이 아닌 input data를 넘겨줘야 하는 변경사항(?) 이슈(?)가 생겼다. 팀원분들께서는 v-model을 사용해서 해보라 그랬으며 그래서 몇 시간 동안 고민해보았으나, 이미 레퍼런스 코드가 있음에도 불구하고 이해가 되지 않아 리드 개발자분께 자문을 구했다.

 

https://v3.ko.vuejs.org/guide/migration/v-model.html#%E1%84%80%E1%85%A2%E1%84%8B%E1%85%AD

v-model | Vue.js

가장 먼저 공식 문서를 훑어봤다. 우리 회사는 Vue2 / Nuxt1로 개발되었기 때문에 Vue3/ Nuxt2로 마이그레이션 하기 위한 작업 중에 있는데, 나는 기존 개발환경에서 개발해야 하는 작업이 있었다. 아무튼, Vue2와 Vue3에서의 v-model의 차이점이 있었는데 그 부분을 제대로 알지 못했던 본인은 공부를 해보기로 했다. 위 공식문서를 읽어보면 자세히 설명이 되어 있기에 꼭 읽어보면 좋을 것 같다.

---

Vue2️⃣에서의 v-model

Vue2.x에서는 컴포넌트에 v-model을 사용하는 것은 value prop를 전달하고, input 이벤트를 emit 하는 것과 같았다. 이게 정확히 무슨 말일까? 아래 코드를 한 번 보면서 설명해보겠다.

 

먼저 부모 컴포넌트에서 자식 컴포넌트와 v-model을 활용하여 양방향 데이터 바인딩을 진행하고 싶을 때, v-model을 사용하여 자식 컴포넌트와 동기화시킬 데이터 이름을 지어주고

 

v-model="자식 컴포넌트와 동기화시킬 데이터 이름"과 같이 import 시킨 자식 컴포넌트에 작성해준다. 사실 v-model의 구조를 뜯어보면 사진 속에서 살펴보면 알 수 있듯이

 

<ChildComponent:value="자식 컴포넌트와 동기화시킬 데이터 이름"@input="자식 컴포넌트와 동기화시킬 데이터 이름 = $event"></ChildComponent>

 

부모 컴포넌트에서 데이터 prop을 통해 자식 컴포넌트로 데이터를 전달하고, 그 데이터를 전달받은 자식 컴포넌트는 이벤트 전달($emit)을 통해 다시 부모로 보내주는 구조라고 이해하면 될 것 같다. 이것을 Vue2 / Vue3에선 v-model이라는 디렉티브 하나로 기능을 내포하여 사용할 수 있도록 해 준 것이다.

 

이어서 자식컴포넌트에서는 부모 컴포넌트에서 value라는 이름에 담은 자식 컴포넌트와 동기화시킬 데이터를 props로 받고, modeling을 통해서(Vue2 기준) 커스터마이징을 시켜준다고 생각하면 된다. 본래 value라는 이름으로 데이터를 prop 시키고 input이라는 이벤트로 v-model 기능을 구현했었는데,  자식 컴포넌트와 연동할 땐 입맛에 맞게 model이라는 것을 선언해주고 변경하여 사용할 수 있다. 여기서 중요한 것은 props라는 데이터는 본래 단방향으로만 흐르는 데이터이기 때문에 변경을 하면 안된다. 그러므로  다시 부모 컴포넌트로 전달해주기 위해서 model을 선언하여 change라는 이벤트로 title이라는 이름으로 변경하여 보내준다는 것이다. 

 

결국 위 사진과 같은 코드로 변경하면 의미는 같아진다. 여기까지가 Vue2에서 사용되는 v-model의 동작 원리이다. 최대한 쉽고, 빠르게 그리고 내가 이해한 잣대로 설명해보자 했는데 이해가 되지 않는 부분이 있거나, 틀린 부분이 있다면 댓글로 남겨주길 바란다.

---

Vue3️⃣에서의 v-model

Vue3에서 커스텀 컴포넌트의 v-model은 modelValue prop을 전달하고 update:modelValue 이벤트를 emit 하는 것과 같다. 전체적인 동작 원리는 Vue2에서의 v-model과 동일하다.

 

추가적으로 여러 개의 v-model을 가질 수 있는데 작성 방법은 아래 코드와 같다.

 

마지막으로 Vue2에서 마이그레이션 하기 위해서는 아래와 같이 정리를 해줘야 한다.

 

Vue.js를 공부하면서 Vue.js 개발자로 취업하면서 이제야 공식문서를 조금씩 이해하는 내가 너무 창피하고 자괴감이 들었지만, 그래도 이렇게나마 하나하나 이해해가면서 개발을 정확하게 하고자 하니 나름 설레었다. 그리고 이 포스팅을 작성하면서 한층 더 깊이 있는 Vue.js 개발을 할 수 있을 것 같아 내심 기분은 좋다.