단방향 양방향 데이터 바인딩 알아보기

@Lukas Blazek unspalsh

데이터 바인딩이란?

화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러 개의 자바스크립트 객체)를 일치시키는 것을 말합니다.

예를 들면 mvc 모델에서 model과 view를 서로 묶어 model과 view의 데이터를 서로 자동 동기화시키는 것으로 이해할 수 있습니다.

 

양방향 데이터 바인딩이란?

백단과 프론트의 뷰 양쪽의 데이터 일치가 모두 가능한 것이 양방향 데이터 바인딩입니다.

데이터의 변화를 감지해 템플릿과 결합해 화면을 갱신, 화면 입력에 따라 데이터를 갱신하는 것입니다.

HTML -> JS, JS -> HTML 양쪽 모두 가능합니다.

 

양방향 데이터 바인딩은 데이터의 변경을 프레임워크에서 감지하고 있다가 데이터가 변경되는 시점에 DOM객체에 렌더링을 해주거나 페이지 내에서 모델의 변경을 감지해 JS실행부에서 변경합니다. 입력된 값이나 변경된 값에 따라 내용이 바로 바뀌기 때문에 따로 체크해주지 않아도 됩니다.

 

양방향 데이터 바인딩은 웹 애플리케이션의 복잡도가 증가하면 증가할수록 빛을 발합니다. 수만은 코드의 양을 줄여줄 뿐만 아니라 유지보수나 코드를 관리하기 매우 쉽게 해 줍니다.

 

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

 

※양방향 데이터 바인딩의 장단점※

장점: 코드의 사용면에서 코드량을 크게 줄여 줍니다.

단점: 변화에 따라 DOM 객체 전체를 랜더링 해주거나 데이터를 바꿔주므로 성능이 감소되는 경우가 있습니다.

 

단방향 데이터 바인딩이란?

단방향 데이터 바인딩은 데이터와 템플릿을 결합해 화면을 생성하는 것입니다.(JS -> HTML만 가능)

사용자의 입력에 따라 데이터를 갱신하고 화면을 업데이트해야 하므로 단방향 데이터 바인딩을 ㅗ구성하면 데이터의 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해주어야 합니다. 

 

현재 자주 사용되는 React가 단방향 데이터 바인딩을 하고 있습니다.

React는 부모 뷰 -> 자식 뷰로 바뀐 내용을 직접 전달합니다.

 

※단방향 데이터 바인딩의 장단점※

장점: 데이터의 변화에 따른 성능 저하 없이 DOM객체 갱신 가능합니다.

데이터 흐름이 단방향(부모 -> 하위 컴포넌트)이어서 코드를 이해하기 쉽고 데이터의 추적과 디버깅이 쉽습니다.

단점: 변화를 감지하고 화면을 업데이트하는 코드를 매번 작성해야 됩니다.