데이터 바인딩 (단방향 바인딩, 양방향 바인딩)

 

 

 

 

 

 

Front-end 프레임워크에 대해 찾아보던 중 Angular / Vue.js가 양방향 데이터 바인딩을 제공한다는 사실을 알게 됐다. 웹 개발을 하며 바인딩이라는 용어를 자주 듣는데, 정확하게 설명하기가 어려워 다시 한 번 공부하며 포스팅하기로 했다.

 

---

 

데이터 바인딩이란?

데이터 바인딩 이란 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법이다. 즉 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다.
출처 : sungjk.github.io/2015/11/22/AngularJS(2).html

 

글로만 봐서는 감이 잡히지 않는다. 마침 Vue.js 실습을 하던 중 데이터 바인딩에 대한 실습을 하게 되어서 감을 잡았다 ! 

 

 

 

사용자의 Input을 받는 웹 페이지의 경우, 사용자의 입력값이 곧바로 데이터 상으로 적용되지 않는다. 곧바로 적용할 수 있지만 임의의 이벤트를 걸어 다시 이벤트를 통해 다시 화면에 뿌려주는 과정이 필요하다. 화면의 값과 메모리상 데이터의 값이 일치하는게 데이터 바인딩인데, 처음 웹 페이지가 랜더링되고 데이터를 표시하는 과정이 단방향으로 진행되기 때문에 이후 사용자가 입력한 값을 이벤트 발생 없이 바로 데이터에 적용할 수 없다.

 

그림을 통해 보면

 

양방향 바인딩(위) 단방향 바인딩(아래)

양방향 바인딩의 경우, 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만 단방향바인딩의 경우 적절한 Event를 통해서만 코드 상 변수에 데이터 값이 담긴다.

 

 

아래 예제로 확인해보면

 

단방향 바인딩을 보여주는 예제

단방향 바인딩 형식이기 때문에 Keyup 이벤트를 등록하고, 해당 이벤트가 발생할 경우 함수를 통해 text의 value 값을 재설정 해주는 방식을 사용했다. Vue.js로 구현했지만 이같은 방식은 자바스크립트 (JQuery)에서도 자주 사용하는 방식이다. 뿐만 아니라 React의 경우에도 양방향 바인딩을 제공하지 않아 위 예제와 같은 방식으로 사용자의 입력값을 변수에 바인딩한다.

 

 

 

아래의 방식은 위 예제 코드를 양방향 바인딩 방식으로 수정한 것이다.

양방향 바인딩

v-model은 Vue.js 에서 양방향 바인딩을 제공한다. keyup 이벤트와 이벤트 함수 없이 바로 사용자가 입력한 값을 화면에 반영할 수 있다.

 

 

 

 

 

자세한 내용은 Vue.js의 공식 가이드로 확인

 

kr.vuejs.org/v2/guide/forms.html

폼 입력 바인딩 — Vue.js