📌 양방향 바인딩 v-model
1. v-model 이란?
입력 요소의 상태와 자바스크립트의 상태를 동기화 시켜주는 디렉티브.
즉, v-model은 양방향 바인딩을 시켜주는 디렉티브이다.
양방향 바인딩이란 무엇일까? 말 그대로, 단방향이 아닌 양방향을 연결시켜주는 바인딩이다.
우리가 이전에 주로 사용했던 v-bind를 살펴보자. v-bind는 단방향 바인딩 디렉티브이다.
먼저 v-bind를 살펴보자.
<input v-bind="textValue">
<script setup>
const textValue = ref();
textValue.value = "안녕하세요";
</script>자바스크립트에서 작성한 "안녕하세요"는 <input>의 textValue로 전달된다.
하지만, input 입력창에 사용자가 입력한 데이터는 자바스크립트의 textValue로 전달되지 않는다.
쉽게 말하면, javaScript → html 방향으로는 데이터가 가고 있는데 javaScript ← html 방향으로는 데이터가 가지 않는 것이다.
실제로 console.log(textValue.value)를 찍어보면, 사용자가 "안녕!!"이라고 입력해도 textValue.value 값이 바뀌지 않는다.
사용자가 input입력창에 입력하는 것을 바로바로 자바스크립트로 전달해 textValue 반응형 변수의 값을 업데이트 하려면 어떻게 해야될까?
<input
:value="textValue"
@input="event => textValue = event.target.value" />value를 바인딩하고 @input이벤트로 textValue의 값을 event.target.value로 변경하는 것이다.
이는 양방향 처리에 있어 꽤나 번거로운 일이다.
그래서 Vue에서는 이러한 작업은 단순화 하도록 양방향을 바인딩할 수 있는 v-model디렉티브를 제공한다.
<input v-model="textValue" />v-model 디렉트브를 이용해 간단하게 양방향 바인딩을 구현할 수 있다.
이제는 input창에 사용자가 입력한 값이 textValue에 바인딩되어 textValue값이 바뀌는 것을 볼 수 있다.
textarea, checkbox, radio, select 또한 v-model 값을 바인딩한다.
2. v-model 수식어(modifiers)
1) .lazy
기본적으로, v-model은 각 input 이벤트 후 입력과 데이터를 동기화 한다.
lazy 수식어를 추가하여 change 이벤트 이후에 동기화 할 수 있다.
<input v-model.lazy="textValue" />이렇게 하면 실시간으로 데이터가 업데이트가 되는 것이 아닌 커서 포인터가 다른 곳을 클릭했을 때 change이벤트가 일어나며 이후에 데이터가 업데이트 된다.
2) .number
사용자 입력이 자동으로 number 타입으로 형변환 되기를 원하면, .number 수식어를 추가하면 된다.
<input v-model.number="textValue" />3) .trim
사용자가 입력한 내용에서 자동으로 앞뒤 공백을 제거하는 트림처리가 되길 바란다면, v-model이 관리하는 input에 trim 수식어를 추가하면 된다.
<input v-model.trim="text" />참고문헌
