데이터 바인딩이란? 단방향/양방향 데이터 바인딩

리액트를 사용하면서 부모에서 자식으로 데이터를 내려준다는 사실을 자연스럽게 터득하게 되었다.

상태 변화해야 할 일이 있을 때 자식 컴포넌트에 setState 함수를 내려줘야 하는 게 불편해서 그냥 자식 이랑 연동돼서 바뀌면 알아서 바뀌면 편할 것 같다고 많이 생각했다. 그래서 단방향, 양방향 차이점과 장단점을 정리해 보게 됐다.

 

안드로이드에서의 데이터 바인딩은 ui와 데이터를 선언적 형식으로 결합할 수 있게 하는 라이브러리라고 한다. 프로그래밍에서의 의미와는 조금 다른 듯하여 다음에 기회가 되면 알아보기로..

---

 

데이터 바인딩이란?

제공자와 소비자로부터 두 데이터 혹은 정보의 소스를 동기화시키는 기법.

즉, 화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 기법이다

 

단방향 데이터 바인딩 (One-way Data Binding)

데이터 흐름이 단방향으로 이루어지고(부모 > 자식) 데이터와 템플릿을 결합하여 화면을 생성한다. 즉 뷰가 바로 업데이트되지 않는다. ex) React

 

• 장점: 데이터 방향을 예측하기 쉽고, 디버깅이 쉽다.
• 단점: 변화를 감지하고 화면을 업데이트하는 코드를 작성해야 해서 코드가 길어진다.

 

양방향 데이터 바인딩 (Two-way Data Binding)

데이터 흐름이 양방향으로 이루어지고 (부모 < > 자식), 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신하고 화면에서의 입력에 따라 데이터를 갱신한다. 즉, 데이터와 화면 사이의 데이터가 계속해서 일치한다. ex) Angular

 

• 장점: 데이터 변화를 감지하고, 화면을 업데이트하는 코드를 쓸 필요가 없어 코드량을 크게 줄여준다. 복잡도가 증가할수록 효율적이고, 코드 관리가 쉬워진다.
• 단점: 변화에 따라 DOM 객체 전체를 랜더링 하거나 데이터를 바꾸므로 성능이 감소되는 경우가 있다.

 

둘의 차이점은 뷰가 얼마나 지속적으로 업데이트되는지에 따라 나눌 수 있다.

단방향 바인딩으로 표현 가능한 요소를 굳이 양방향으로 활용 시 불필요한 리소스 확보로 성능 저하를 일으킬 수 있어 상황에 따라 사용하는 게 좋다. 

 

 

 

reference

https://velog.io/@milkyway/%EB%8D%B0%EC%9D%B4%ED%84%B0-%EB%B0%94%EC%9D%B8%EB%94%A9-Data-Binding

https://itworldyo.tistory.com/124?category=946003