Vue.js와 양방향 데이터 바인딩
Vue.js의 양방향 데이터 바인딩에 대해 알아보자
Vue.js에서 양방향 데이터 바인딩이라는게 그렇게 중요하다길래. 그게 무엇이고, 실제로 어떻게 쓰이는지를 직접 찾아보기로했다.
Vue.js에서의 단뱡항 / 양방향 데이터 바인딩
https://redpanthers.co/two-way-binding-in-vue-js/
이 글은 필자가 Vue.js에 대해 공부하는 과정을 그대로 정리한 글입니다. Vue.js 관련된 내용을 잘 알지 못하시는 분이라면 - 다음 게시글을 먼저 참조하세요.
Vue.js란 무엇인가?
https://brunch.co.kr/@clay1987/93
Vue.js의 3가지 핵심구조 - Vuex / VueCLI / Vue Router
https://brunch.co.kr/@clay1987/138
양방향 데이터 바인딩에 대한 예시
Angular JS로 보는 양방향 데이터 바인딩
(본문 내용을 축약 / 간단하게 변형함)
<body ng-init=”name=’something'”> // (2)
<input type=”text” ng-model=”name”/> // (3)
<div><h2>Hello, {{name}}</div> // (4)
- A=B다. (초기값 설정)
- A에 텍스트 형태로 인풋을 받아라
- 입력받은 최종 A값을 hello,와 함께 출력해라.
(해설)
현재 scope에 정의된 name이라는 모델에 들어간 값도 NodeJS 라고 곧바로 바뀝니다. 뭔가를 타이핑할때마다 name 모델의 값이 수시로 바뀝니다.이것이 바로 양방향 데이터 바인딩(two way databinding)의 힘입니다. scope는 이렇듯 변화를 감지하고, 변화가 생기면 그 값을 즉시 업데이트 합니다.
단방향 데이터 바인딩에 대한 예시
2세대 JS 프레임워크들의 특징이 바로 이런 양방향 데이터 바인딩. 입력한 값이나 변경된 값에 따라서 해당 내용이 즉각즉각 바뀐다는점. 기존에는 얘네가 바뀌었는지 아닌지 하나하나 체크해줘야하는 방식이었다고한다.
(본문 중 발췌 / 간략화)
$scope.$apply()
이 기능을 사용하면 jQuery 플러그인에서 model로의 단방향 데이터 바인딩 만을 제공한다. Angular에서는 $scope.$watch()를 사용하여 특정 구문에 리스너를 바인딩하여 model의 변경사항을 볼 수 있다.
$scope.$watch()
scope 객체 안에 존재하는 메서드로, 이름처럼 특정 변수를 주시하면서 값의 변화가 있는지를 점검하고 변화가 있으면 미리 등록해놓은 콜백 메서드를 호출하게 된다. (따로 어디를 바뀌었는지 체크해라. 라는 명령어를 주어야했던 방식)
$scope.$watch('name', function(newValue, oldValue){ window.alert('$scope.name의 값이 '+ $scope['name']+ '로 바뀌었다.'); }, true);
기본값인 false에서는 관찰하고 있는 변수의 레퍼런스가 변화했는지 체크하게 되고, true일 경우 레퍼런스가 아닌 실제 변수내의 값이 변화했는지를 점검하게 된다.
React / Angular / Vue 양방향 데이터 바인딩 비교
대부분의 경우 angular JS에대한 내용이 나오는걸 보면. 2015년 양방향 데이터 바인딩이란 자동 체크개념을 - angular JS에서 처음 도입했기 때문인것으로 보인다. 관련 영상에서도 나오는데. Angular와 React는 관련 구조가 좀 다르다.
React and Angular js - 1 vs 2 way Data binding (2016. 11월)
https://www.youtube.com/watch?v=DUP5TJtBL3I
2016년 기준의 영상이기 때문에. 현재에는 내용이 좀 달라졌나해서 확인해보니, 기본적으로 큰 구조가 바뀐것같지는 않아보인다.
- Angular는 자바스크립트 기반의 모델이 있고. 컨트롤러와 HTML view를 통해 컨트롤러와 소통한다. (양방향)
- React는 모든게 자바스크립트 기반으로 움직이고, 뷰 단에서 자식 뷰로 내려가 - 바뀐 내용을 어플리케이션 쪽에 직접 전달한다. (단방향)
- 기존 v15에서 사라진 양방향 사용방식인 - LinkedStateMixin
https://reactjs.org/docs/two-way-binding-helpers.html
- 2way data binding의 재변형 ?
(본문 중 발췌)
기존의 react에서의 React.createClass() 메소드를 사용하여 컴포넌트를 생성하면 이 메소드가 자동으로 mixin 과 autobinding을 다뤄주어 바인딩을 할 필요가 없었습니다. 그런데 최신 JS의 객체 지향성 클래스라는 기능을 가지게 되어 리액트도 이를 지원하게 되어 조금 더 바닐라 자바스크립트와 가깝게 되었죠. 그래서 최근 리액트 프로젝트들은 컴포넌트를 es6 class를 사용하는 추세입니다.
-
React는 사실상 Angular나 Vue와 같이 단순한 양방향 데이터 바인딩 방식을 지원하지 않는다고 봐야할듯하다.
Vue JS에서의 양방향 데이터 바인딩
Vue.js에서는 Angular처럼 양방향 데이터 바인딩을 제공한다.
양방향 데이터 바인딩의 장점은 - 상태값에 따른 즉각적 반응을 확인해서- 데이터 표기 / UI 단의 변형이 일어날 수 있도록 돕는다는 점에 있다.
Vue.js에서의 단뱡항 / 양방향 데이터 바인딩
https://redpanthers.co/two-way-binding-in-vue-js/
(본문 중 발췌 : 원문)
The attribute used with input v-modelis a vue directive. We have to assign data model with the directive. A directive’s job is to reactively apply special behavior to the DOM when the value of its expression changes. In the case of v-model, it binds the element to one of the data properties that Vue is watching. Vue has many directives. Another one is v-on which binds an element to an event. For example, v-on: click is to bind element when clicking on it.
(해석)
V-model과 V-on을 통해 양방향 데이터바인딩이 가능한데. V-model이 DOM에 연관된 내용을 잡아내고, Vue가 바라보는 대상의 속성과 연결이 된다고한다. 반대로 V-on은 '이벤트'를 잡아내는 데에 사용된다.( V-on: click = 클릭 이벤트를 잡아냄)
Vue 단방향 데이터 바인딩 (is 사용)
<div id="app">
<span>The message is: {{message}}</span>
</div>
Vue 양방향 데이터 바인딩 (v-model 사용시)
<div id="app">
<span>{{message}}</span><br>
<input v-model="message">
</div>
여기서 더 파고들려면 V-model과 V-on에 대해서 알아봐야할듯하다.
Vue.js 기반 양방향 데이터 바인딩 그래프 예제
https://codepen.io/zingchart/pen/VPzgXB
그래프에 실시간 입력값 반영을 확인할 수 있고, 사용자 인터렉션에도 즉각 반응한다.
- 추후 확인할 vue 관련 용어들 : v-for / v-if / v-on/ v-dom / v-bind / v-model
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
