[Javascript] Data Binding

Data Binding ?

웹 개발을 하다보면 뷰와 모델의 분리는 필수적이지만, 분리된 뷰와 모델은 공통적으로 동작하여야 한다.
이러한 뷰와 모델을 하나로 묶어 연결하는 것을 데이터 바인딩(Data Binding) 이라고 부른다.

즉, 두 개의 데이터 소스(또는 동일한 데이터에 대한 두 개의 개별 표현)를 함께 연결하고 동기화 상태를 유지하는 기술

 

데이터 바인딩은 2개의 종류로 나뉜다.

1. One way binding(단방향 바인딩)
   : 데이터 흐름이 단방향으로 이루어지고 뷰가 바로 업데이트 되지 않는다.
2. Two way binding(양방향 바인딩)
   : 데이터 변경에 따라 프레임워크를 통해 양방향으로 이루어지며 뷰가 즉각 업데이트 된다.

대표적으로 Two way binding을 지원하는 Library는 Angular.js고, Vue.js를 사용해보진 않았지만 이것 저것 찾아다니다 보니 지원을 한다고 하는 것 같기는 하다.

(Vue.js를 따로 사용해보지 않아 정확히는 모르겠다.)

 

Angular.js에서는 그 외에도 단방향 바인딩을 지원하고 있다.

React.js에서는 단방향 바인딩만 지원하고 있으며 양방향 바인딩을 구현하기 위해서는 따로 Handler를 만들어 조작해야 한다.

 

"그럼 무조건 양방향 데이터 바인딩이 좋은거 아닌가?"

→ 그렇지만은 않다. 개발자는 앱을 개발하면서 적절한 스펙에 맞게 오버 엔지니어링이 되지 않도록 해야 한다.

단방향 바인딩으로 표현 가능한 요소를 굳이 양방향으로 활용 시 불필요한 리소스 확보로 인해 성능에 영향을 끼치게 해서는 안된다.

양방향 데이터 바인딩은 내부적으로 변경사항을 감시하는 메커니즘을 내포하고 있어 오버헤드가 생길 수 밖에 없다.

Data Binding 원리

Data Binding 원리 (출처 : https://velog.io/@milkyway/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9-Data-Binding)

• 단방향 데이터 바인딩
  : 단방향 데이터 바인딩에서 데이터 흐름은 한쪽으로만 제한되며 이는 Model에서 View로 제한이 된다.
  Model이 업데이트 되는 경우 View 부분에서도 동일하게 동기화되지만, View에서 Model로 데이터 흐름이 있을 수 없기 때문에 View에서 업데이트를 한다고 해서 Model이 업데이트 되진 않는다.
  
  즉 위 그림으로 보았을 때 title은 watcher로 데이터를 보내고 있고, watcher는 데이터가 변경됨을 감지해 View로 보내고 있다.
  View에서 title을 업데이트 하기 위해서는 Event를 보내야하며, Event는 title을 변경시키고 있다.
  
  
  
• 양방향 데이터 바인딩
  : 양방향 데이터 바인딩에서 데이터 흐름은 양방향으로 모두 흐를 수 있으며, 이는 Model → View, View → Model로 모두 가능하다는 것 이다.
  Model이 업데이트 되는 경우 View 또한 업데이트 되고, View에서 업데이트 되는 경우 Model 또한 업데이트가 된다.
  
  이는 Watcher 2개가 서로 참조를 하고 있기에 가능한 일이다.

이를 조금 더 설명하자면, 아래와 같다.

출처 : SIMFORM

단방향 데이터 바인딩의 경우 View에 보여지는 내용은 Model과 Template이 서로 합쳐진 다음 View에 보여지는 것이고,

양방향 데이터 바인딩의 경우에는 Template은 View에 내용을 넣어놓고 이 후에 View와 Model이 서로 참조를 진행하면서 데이터 및 View를 업데이트 하는 것이다.

 

두개 모두 다 훌륭한 기술임이 틀림 없다.