양방향 바인딩(2way data binding)이란 무엇인가?

 

 

우선 양방향 바인딩에 들어가기 전에 데이터 바인딩이란 무엇인가에 대해 들어갈 필요가 있다.

🎁 데이터 바인딩이란? 

두 데이터 또는 정보의 소스를 일치시기는 방법으로 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터(여러개의 자바스크립트 Object(객체)를 일치시키는 것을 말합니다. 예시로 MVC모델에서 model과 view를 서로 묶어서 model과 view를 자동 동기화하는 것을 말합니다. 

🎁 양방향 데이터 바인딩은 그럼 무엇일까? 

쉽게 말하자면 양방향 데이터 바인딩은 Back-end의 Model과 Front-end의 뷰 양쪽의 데이터 일치가 모두 가능한 것이다. 데이터의 변화를 감지하여 템플릿과 결합해 화면을 갱신하거나 화면 입력에 따라 데이터를 갱신하게 되는 것입니다. 뷰에서 사용자가 특정 데이터를 변경시키면 JS에서 데이터도 변경되고 반대로 JS에서 어떤 값을 수정하게 된다면 그 값이 바인딩 되어 있는 HTML요소도 그 값에 따라 자동으로 렌더링을 하게 됩니다. (HTML -> Javascript 또는 Javascript -> HTML 모두 가능) 

 

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

 

 

위에 예시는 vue.js 또는 angular.js 다 포함되는 원리인데 AngularJs 에서 $watch가 위의 그림에서 watcher 역할을 하는데 어떠한 변화가 있는지 감시하고 있다가 변화가 감지되면 watch_list에 담습니다. 이렇게 뷰에서도 모델을 제어할 수 있고 반대로 모델에서 뷰를 제어할 수도 있습니다. 

controller에서 model 변경 -> view 변경 

view에서 scope model 변경 -> controller에서 model 변경 

 

📌양방향 데이터의 장점

👉 코드가 엄청 짧아진다(데이터 자체를 직접 렌더링 하지 않고 DOM이 렌더링하기때문에 그와 관련된 코드 필요 X)

👉 웹애플리케이션의 복잡도가 증가하면 증가할수록 그 힘이 보여진다

👉 사용하는데에 있어 편리하다(유지보수나 코드를 관리하기 매우 쉽게 해줌)

 

📌양방향 데이터의 단점

👉 성능이 감소되는 문제가 있다(일괄적으로 변화에따라 DOM이 바인딩 된 모든 요소들을 렌더링하기 때문에)

 

📌 사용되는 프로그램  

👉 Vue.js 프레임워크, Angular.js 프레임워크

 

이러한 크리티컬한 단점 때문에 단방향 데이터 바인딩이 등장합니다.

 

🎁 단방향 데이터 바인딩은 그럼 무엇일까? 

해당 바인딩은 템플릿과 모델이 결합하여 View에 반영되는 방식입니다. 양방향일때는 템플릿 아래에서 뷰와 모델이 watcher에 의해서 계속 끊임없이 업데이트 되는 개념과 완전 반대되는 방식이죠. 그래서 단방향에서는 데이터의 변화를 감지하여 동작하게 하는 코드(즉 watcher) 역할을 매번 작성해주어야 합니다. HTML에서 특정 값을 변경하여 그것에 의해 화면이 변경되거나 하는것을 구현하고 싶다면 이벤트 함수들(change, click 등등)을 일일이 걸어줘야 한다는 뜻입니다.

(JS -> HTML만 가능)

 

그렇다면 단방향 데이터는 쓸모없는거 아니냐? 귀찮은데 그럼 양방향 데이터 바인딩 쓰는게 훨씬 낫지 않냐 하지만 위에서 말한 크리티컬한 단점들을 해결해주기 때문에 큰 역할을 해줍니다.

 

📌단방향 데이터의 장점  

👉 일일이 데이터 자체를 view에 반영할 수 있게 코드를 입력해줘야 하기에 필요한 곳에서만 사용할 수 있다(양방향에서는 model이 변화하게 되면 view 전체에 영향을 끼치기 때문에 어떤 결과물이 나올지 예측 불가능)

👉 성능적인부분에서 양방향 보다 훨씬 좋다-> 데이터 변화에 따른 성능 저하없이 DOM 객체 갱신 가능

👉 데이터를 추적하거나 디버깅 역시 쉬운편이다 -> 데이터 흐름이 단방향(부모 -> 자식 컴포넌트) 

 

📌단방향 데이터의 단점  

👉 DOM에서 일일이 변화에 따라 요소들을 렌더링하지 않고 일일이 변화를 감지하는 코드를 작성하기에 매우 귀찮음을 느낄 수 있다

👉 해당 변화를 감지하고 화면을 업데이트하는 코드를 짜게 되면 코드의 양이 길어질 수 밖에 없다

 

📌 사용되는 프로그램  

👉 리액트(React) 라이브러리(부모 view -> 자식 view로 바뀐 내용을 직접 전달)