용어 | 데이터 바인딩

데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것을 말합니다

MVC 모델에서 model(DB) 과 view를 자동 동기화 시킨다고 생각하면 됩니다.

양방향 데이터 바인딩

단방향, 양방향 데이터 바인딩 : 뷰, 앵귤러, 스벨트

• Controller 에서 Model 변경됨 > View 변경
• View 에서 Scope Model 변경됨 > Controller 에서 Model 변경

장점 : 코드량이 줄어듭니다
단점 : 성능이 저하될 수 있습니다. 변화에 따라 DOM 객체를 렌더링하거나 데이터를 바꿔주기 때문.

• 컨트롤러 와 뷰 양쪽의 데이터 일치가 가능합니다.
  HTML > JS , JS > HTML
• 코드가 짧아지기 때문에 앱의 복잡도가 증가할수록 빛을 봅니다.
  유지보수가 편해집니다.
  

단방향 데이터 바인딩

단방향 데이터 바인딩 : 리액트

단방향 데이터 바인딩은 데이터와 템플릿을 결합해 화면을 생성합니다.
JS > HTML 로만 가능합니다.

장점

• 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신 가능
• 데이터 흐름이 단방향입니다. (부모 > 하위 컴포넌트)
  데이터 추적과 디버깅이 쉽습니다.

단점

• 변화를 감지하고 업데이트 하는 코드를 매번 작성해야 합니다.

변화 감지 데이터바인딩

비동기 처리가 수행될 때 컴포넌트 클래스의 데이터가 변경될 수 있습니다.
변화 감지는 모델이 변화할 수 있는 이러한 상황들을 감시합니다.

• DOM 이벤트 (Click, Key 입력, Mouse 움직임)
• Timer 함수 (setTimeout, setInterval) tick 이벤트
• AJAX 통신, Promise

vue.js

• V-model , V-on 을 통해 양방향 데이터 바인딩을 합니다.
• V-model 이 DOM 과 연관된 내용을 잡아내고, Vue가 바라보는 대상의 속성과 연결됩니다.
• V-on 은 이벤트를 잡아내는데 사용됩니다.

참조

• Angular Component – Data Binding | PoiemaWeb