데이터 바인딩

이 글은 AngularJS 도큐먼트 페이지의 데이터바인딩 페이지를 번역한 것입니다.
원문 보기 : https://docs.angularjs.org/guide/databinding

1. 데이터 바인딩

 데이터 바인딩은 뷰 컴포넌트와 모델 사이의 자동 데이터 동기화하는 것을 말합니다. Angular를 이용하면, 어플리케이션의 모델을 single-source-of-truth로 데이터 바인딩을 구현할 수 있습니다. 뷰는 모델을 투영된 형태가 됩니다. 모델이 변경되면, 바로 뷰에 반영되며, 역으로도 동일합니다.

용어. Single source of truth 

정보 시스템의 디자인 이론 중에 하나인, 모델과 그와 연관된 스키마를 정의함에 있어서 모든 데이터 요소는 시스템에서 유일한 값으로 존재하도록 하는 것을 말합니다. 

출처. 위키피디아

2. 전통적인 템플릿 시스템에서의 데이터 바인딩

 대부분의 템플릿 시스템들은 일방향으로의 데이터 바인딩을 제공합니다. 템플릿과 모델을 통합하여, 뷰에 반영합니다. 한번 통합이 이루어진 다음에는, 모델이 변동되어도, 이와 관련된 뷰는 자동으로 갱신되지 않습니다. 또한, 사용자 조작으로 뷰가 변경되어도, 모델에는 반영되지 않습니다. 즉, 뷰와 모델, 모델과 뷰를 동기화 해주는 코드를 개발자가 추가적으로 작성해야한다는 뜻입니다.

2. Angular 에서의 데이터 바인딩

Angular 템플릿의 동작 방식은 조금 다르다. 첫째, 브라우저를 통해 템플릿이 컴파일 된다. 컴파일 과정에서 실시간 뷰(Live-View)를 생산한다. 뷰에서의 어떠한 변화도 바로 모델에 반영되고, 모델에 생기는 모든 변화가, 뷰에 반영된다. 어플리케이션 상태에서 모델은 single-source-of-truth이고, 개발자가 모델을 완전 간단하게 프로그래밍 할 수 있다.

 뷰는 순수하게, 모델의 투영일 뿐이므로, 컨트롤러는 뷰로부터 완전히 분리되어, 신경 쓸 필요가 없다.  테스팅을 깔끔하게 진행할 수 있습니다. 이는 DOM/browser에 종속된 뷰와 완전히 분리된 컨트롤러 덕분이라고 할 수 있습니다.