Vue.js - Binding
바인딩에 대한 개념
화면의 값과 메모리상의 데이터 값이 일치하는게 바인딩이라고 한다.
바인딩의 종류는 단방향 바인딩과 양방향 바인딩으로 나뉜다.
예를 들어, 아래와 같이 input의 메세지를 변경할 시에, h태그 내 값도 동시에 변경이 되어야 하는 상황이 왔다.
메세지를 변경할 부분
1. 일반적으로 jsp에서의 처리
input에 함수를 바인딩하여 이벤트가 발생한다면 h내의 메세지를 변경하는 것이 기존 JSP페이지에서 Jquery를 사용한 방식으로 처리해왔다.
이처럼 이벤트를 사용해야만 우리는 화면이나 데이터단에서의 값을 변경할 수 있다.
하지만 뷰에서는 조금 다르다.
방법을 알아보기 이전에 뷰에서는 데이터를 어떻게 제어하고 있는가에 대해 확인해보자.
2.Vue에서의 처리
Vue에서는 단방향 바인딩과 양방향 바인딩 2가지 종류로 나눌 수 있다.
단방향 바인딩과 양방향 바인딩은 어떻게 다를까?
단방향 바인딩
단방향 바인딩은 아래 그림처럼 데이터에서 Vue로 값을 넘겨주는 방식이다. 일방적으로는 다시 Vue에서 데이터 쪽으로 값을 넘겨줄 수 없다.
(물론 이벤트를 발생하면 가능하지만 우리는 개념을 잡기 때문에 그런 여러 상황들은 고려하지 말고 생각하자)
양방향 바인딩
양방향 바인딩은 데이터 <-> Vue와 서로 값을 넘겨주고 받을 수 있다. 그렇기에 위 그림처럼 input text의 값을 변경하기만 해도, h 태그의 값이 변한다. 우린 이것을 양방향 바인딩이라고 하기로 했다.