개발자 사전

개요

AngularJS 어플리케이션에서의 데이터 바인딩 이란, Model과 View 사이에서의 자동 동기화를 말합니다. 

Model 은 어플리케이션에서 유일하게 데이터를 가공하는 곳입니다. 

View는 Model의 변경에 따라 그 내용을 사용자에게 보여주는 역할을 합니다. 

Model에서의 변경은 View의 변경을 일으키고, View에서의 변경은 Model에서의 변경을 일으킵니다. 

일반적인 템플릿 엔진에서의 Data Binding 

일반적인 템플릿 엔진에서 데이터는 한 방향으로 흐릅니다. 

템플릿과 모델을 merge하는 과정을 거쳐서 view를 만들게 되면, 이 때 Model이 변경되어도 View에 반영되지 않습니다. 
사용자가 view에서 하는 action들 또한 Model에 영향을 미치지 않습니다. 
이 이유로 개발자가 직접 Model과 View사이를 주기적으로 동기화 하는 과정을 관리해야하는 번거로움이 있습니다.

AngularJS에서의 Data Binding

AngularJS에서 템플릿은 다르게 동작합니다. 템플릿은 ( 컴파일되지 않은 Html, Angular Directive등이 포함되어 ) 동시에 브라우저에 의해 컴파일 됩니다. 컴파일 과정의 결과물이 View입니다. Model에서의 변경사항은 즉시 View에 반영되고, 그 반대 역시 반영됩니다.

Model은 여전히 유일하게 Data를 가져오고 다루는 곳입니다. 위에서 일반적인 템플릿 엔진에서 개발자가 신경써야 했던, 데이터 동기화가 간단해 졌습니다.