단방향 데이터 바인딩 양방향 데이터 바인딩

데이터 바인딩은 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것을 말한다.
즉 사용자 인터페이스와 데이터 모델간의 동기화이다.

 

 

이에 두가지 주요 방법이 존재한다.

 

---

 

1. 단방향 데이터 바인딩 

 

단방향 데이터 바인딩에서는 데이터가 한 방향으로만 흐른다. 즉 모델에서 뷰로의 데이터 흐름만 존재하고, 뷰에서 모델로의 직접적인 업데이트는 발생하지 않는다.

사용자 인터페이스는 데이터 모델의 상태를 읽기 전용으로 표시하는데 이는 데이터 모델의 변경이 뷰를 갱신할 수 있지만 뷰의 변경이 직접적으로 모델을 갱신하지 않는다.

대표적인 프레임워크는 React 이다.

쉽게말해 HTML 에 바인딩한 데이터를 JS 에서 수정할 경우 화면에는 반영되지만, 화면에서 직접 해당 엘리먼트의 값을 바꿨을때 JS 의 데이터가 수정되도록 바인딩하는 방법은 제공하지 않는다.

 

장점이 무엇일까?

 

•  데이터의 흐름이 단방향이기 때문에 애플리케이션의 상태를 추적하고 디버깅하기 편리하다.
•  뷰와 모델이 명확하게 분리되어 있어, 코드의 복잡성이 감소하고 유지보수가 유용하다.
•  모든 JS 코드가 데이터에 집중되어 일관된 데이터 로직을 갖는다.
• 데이터의 변화에 따른 성능 저하 없이 DOM 객체 갱신이 가능하다.

단점이 무엇일까?

 

•  사용자 인터페이스가 복잡해지거나 상호작용이 많은 애플리케이션에서는 뷰에서 모델로의 데이터 흐름을 추가적으로 관리해야할 수 있다. 즉 유연성이 제한되어 있다.
•  사용자의 입력에 따라 데이터를 감지하고 화면에 업데이트하는 코드를 매번 작성해야하므로 코드 양이 많아진다.

---

 

2. 양방향 데이터 바인딩

 

양방향 데이터 바인딩에서는 데이터가 모델과 뷰 사이에서 양방향으로 흐른다.

이는 뷰에서 발생하는 변경사항이 모델을 업데이트하고, 그 변경사항이 다시 뷰를 업데이트하는 것을 의미한다.

이 방식은 사용자 입력과 애플리케이션의 상태가 실시간으로 동기화되어야 하는 인터랙티브한 애플리케이션에 적합하다.

대표적인 프레임워크는 Angular 이다.

쉽게 말해 input 값을 수정해 데이터를 변경할 수도 있다.

 

장점이 무엇일까?

 

•  데이터를 수동으로 동기화할 필요가 없어 개발속도가 빨라진다.
•  사용자 인터페이스와 데이터 모델 간 즉각적인 상호작용을 통해 더 나은 사용자 경험을 제공할 수 있다.
•  바뀌는 내용이 바로 반영 가능하기에 코드의 사용면에서 코드량을 크게 줄여준다.

 

단점이 무엇일까?

 

•  양방향 데이터 바인딩은 상태 변경을 추적하기 어렵게 만들기 때문에 애플리케이션의 복잡성을 증가시킨다.
•  큰 규모의 데이터나 복잡한 데이터 구조에서 성능이 저하될 수 있다.

---

 

단방향 데이터 바인딩은 애플리케이션의 상태를 명확하게 관리할 수 있게 해준다. 

양방향 데이터 바인딩은 개발 편리성을 높여주지만 복잡한 시스템에서 상태 추적이 어려울 수 있다.