[Udemy Vue 완벽가이드 Section2] 27. 데이터 바인딩 + 이벤트 바인딩 = 양방향 바인딩

input태그에 있는 입력값을 reset하려고 한다. 이를 위해 새 메서드인 resetInput을 추가한다.

 

JavaScript를 이용하여 input에 액세스 할 수 있다.

querySelector로 input태그에 액세스하고, value프로퍼티에 액세스하여 빈 문자열로 설정.

reset(){
 document.querySelector('input').value = '';
}

이렇게 하면 작동은 되지만, 임시방편적인 해결책이다. (hacky)

이렇게 노골적으로 JavaScript 구문을 쓰면 Vue를 사용하는 이유가 없다. Vue의 기능을 활용해보자!

 

 

먼저, 키 입력마다 최종적으로 업데이트되는 값인 name 데이터 프로퍼티를 input요소에 출력해보자.

value속성을 name으로 설정하는데 name은 동적이고 Vue에서 관리하니 v-bind를 이용하여 이름을 입력 요소에 반영한다.

그래서 data 프로퍼티에 있는 name이 input에 반영된다.

굳이 왜 이렇게 작업할까?

 

<input type="text" v-bind:value="name" v-on:input="setName($event, 'oh')" />
<button v-on:click="resetInput">Reset Input</button>

 

setName(event, lastName){
 this.name = event.target.value + ' ' + lastName;
},
resetInput(){
 this.name = "";
}

위와 같이 코드를 짜면, input창에 글자를 입력할 때마다 lastName이 계속 추가된다. (ria를 순서대로 쳤을 경우 아래와 같이 'oh'가 계속 추가되어서 나온다.)

 

 

setName메서드에 lastName은 삭제하고, 사용자가 키를 입력할 때마다 name에 값을 저장 → 그 다음 name을 input에 반영 → input에 사용자가 실제 입력한 값이 반영된다.

 

Reset Input버튼을 눌렀을 때 resetInput이 트리거되도록 이벤트바인딩을 한다.

이제 Reset Input버튼을 누르면 input입력칸에 입력된 입력값들이 사라진다.

 

아래와 같이, input요소에서 value속성에 name값을 바인딩하지 않으면, 입력은 되더라도 Reset Input버튼 클릭 시, 입력값이 사라지지 않는다.

<input type="text" v-on:input="setName" />
<button v-on:click="resetInput">Reset Input</button>

 

 

이렇게 사용자가 입력한 값만 가져오는 것이 아니라(event.target.value), 입력 요소에 값을 설정하고(v-bind:value="name") 버튼이나 다른 로직으로 reset할 수 있도록 만들고 싶은 경우에 해당된다.

이를 구현하려면 입력을 그냥 수신하는 것이 아니라, 저장된 값을 value 프로퍼티에 바인딩(v-bind:value="name")해서 입력요소에 전달할 수 있다.

실제로 이 패턴이 자주 사용되기 때문에 Vue에서 축약어를 제공한다. 패턴을 단순화한 특수내장 프로퍼티가 있다. → v-model

 

값을 바인딩하고 input에서 입력 변경을 수신하면, v-bind:value="name" v-on:input="setName" 이 부분을 전부 삭제할 수 있다. 

값 바인딩과 입력 이벤트 수신을 둘다 제거하고, 대신 input에 새로운 디렉티브인 v-model 디렉티브를 추가한다.

그리고 이 디렉티브가 관리할 데이터 프로퍼티만 넣어주면 된다.

<input type="text" v-model="name" />

 

input이벤트를 받아 name 프로퍼티값을 업데이트 시키고, name 프로퍼티값은 입력요소(input element)로 다시 전송된다.

v-model은 v-bind:value, v-on:input의 축약어. 하지만 코드는 더 적어졌다.

 

이건 양방향 바인딩이라고 불리는 개념이다. 

입력요소에서 나오는 event, 즉 위 예시에서는 input event를 수신하는 동시에, value 속성을 통해 값을 입력요소에 다시 보낸다. 양방향으로 통신하기 때문에 양방향 바인딩이라고 한다.

 

* template => Vue 인스턴스의 data 프로퍼티

: 유저가 입력필드(ex: input태그)에 값을 입력 => data 프로퍼티에 그 값이 반영.

 

* Vue 인스턴스의 data 프로퍼티 => template 반영

: 바인딩한 data 프로퍼티 변경 => template 입력필드에 반영

 

 

 

사용자 입력의 수신과 업데이트를 아주 쉽게 할 수 있도록 도와준다.

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의를 기반으로 작성하였습니다.