데이터 바인딩 (Data Binding)

데이터 바인딩(Data Binding)

데이터 바인딩은 뷰 요소 혹은 사용자 인터페이스를 채우는 데이터를 연결하는 프로세스이다. 즉, Model과 View의 연결을 생성한다. 쉽게 생각한다면, UI 구성요소에 데이터를 동기화 시키는 방법이라 생각하면 될거같다.

데이터 바인딩은 2가지 유형으로 분류할 수 있는데 단방향 바인딩과 양방향 바인딩이 존재한다.

단방향 바인딩 (One-Way Binding)

1. 단방향 바인딩에서 데이터 흐름은 모델 -> 뷰 혹은 뷰 -> 모델 하나의 방향이다

2. 모델 -> 뷰 형식의 단방향 바인딩에서 데이터가 변경되었을 경우에 바인딩 되어있는 구성요소의 값이 자동으로 업데이트되지만, 구성요소에서 값을 변경하여도 바인딩 된 데이터의 값이 변경되지 않는다.

3. UI에서 변경 내용을 모니터할 필요가 없는 경우에 단방향 바인딩을 사용하면 불필요한 리소스 확보를 줄일 수 있다.

양방향 바인딩 (Two-Way Binding)

1. 양방향 바인딩에서 데이터 흐름은 모델 <-> 뷰 양방향이다.

2. View에 대한 모든 변경 사항은 Model로 전파되고, Model에 대한 모든 변경 사항 또한 View에 반영된다.

---

웹 프레임워크들의 바인딩

웹 프레임워크 3대장의 바인딩은 어떨까?

Angular

Angualr는 단방향, 양방향 바인딩 모두를 지원한다.

React

React는 단방향 데이터 바인딩을 지원하며 둘 중 하나 조건을 따를 수 있다.

• Componet to View: Component 데이터의 모든 변경사항은 View에 반영 됨
• View to Component: View 데이터의 모든 변경사항은 Component에 반영 됨

Vue

Vue는 단방향, 양방향 바인딩 모두를 지원한다.