단반향 바인딩과 양방향 바인딩

데이터 바인딩(Data Binding)이란?

화면상에 보이는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.

 

예를 들어 HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주었을 때, 해당 값이 변경될 경우 다시 HTML상에 데이터를 변경된 값에 따라서 맞추어 주는 동작을 데이터 바인딩이라고 한다.

 

 

단반향 바인딩

장점

• 데이터 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능하다.
• 데이터 흐름이 단방향(부모 -> 하위 컴포넌트)이라, 코드를 이해하기 쉽고 데이터 추적과 디버깅이 쉽다.

단점

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

대표적인 프레임워크

• 리액트

단방향 데이터 바인딩은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다.

단방향 데이터 바인딩이기에 역으로 HTML에서 Javascript로의 직접적인 데이터 갱신은 불가능하다. 따라서 이벤트 함수를 주고 함수를 호출한 뒤 Javascript에서 HTML로 데이터를 변경해야 한다.

단방향 데이터 바인딩은 부모 컴포넌트에서 하위 컴포넌트로만 데이터가 전달되는 구조이다.

 

 

 

양방향 바인딩

장점

• 코드량을 크게 줄일 수 있다.
• 코드의 유지보수 및 관리를 매우 쉽게 해 주므로, 웹 애플리케이션의 복잡도가 증가할수록 빛을 발한다.

단점

• 변화에 따라 DOM 객체 전체를 렌더링 해주거나 데이터를 바꿔주므로, 성능이 감소되는 경우가 있다.

대표적인 프레임워크

• Vue.js
• Angular

양방향 데이터 바인딩은 Javasciprt와 HTML 사이에 ViewModel이 존재하여 하나로 묶여(Binding) 둘 중 하나만 변경되어도 함께 변경되는 것을 의미한다.

컴포넌트 간에서는 부모 컴포넌트에서 하위 컴포넌트로 Props를 통해 데이터를 전달하고, 하위 컴포넌트에서 부모 컴포넌트로는 Emit Event를 통해서 데이터를 전달하는 구조이다.

양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가, 데이터가 변경되는 시점에 DOM 객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS 실행부에서 변경한다.

 

 

💬 오늘의 생각

React만 다뤄봐서 양방향 데이터 바인딩은 아직 사용해보질 못했다.
양방향 데이터 바인딩은 웹 애플리케이션의 복잡도가 증가할수록 그 진가를 발휘한다고 하니 조금 더 깊게 공부해 봐도 좋을 것 같다.

 

 

 

 

📖 레퍼런스

https://adjh54.tistory.com/49

https://velog.io/@sunaaank/data-binding

https://velog.io/@sunaaank/data-binding

https://poiemaweb.com/angular-component-data-binding