양방향 바인딩(2 way data-binding)

1. 데이터 바인딩(Data-Binding) 이란?

 양방향 바인딩을 알아보기전에 먼저 데이터 바인딩이란 '화면에 있는 객체'와 '데이터'를 일치시켜주는 것으로 쉽게 말해 JS 데이터를 HTML 데이터와 같도록 해주는 것이다!

사용자가 입력한 정보를 얻어와 찾아온 데이터를 갱신하는 것이 기본적인 웹 기술의 데이터 바인딩이다.

 

2. 양방향 바인딩(2 way data-binding) 이란?

 - 말 그대로 백단과 프론트의 뷰 양쪽 방향으로 데이터 일치가 가능한 것이 양방향 데이터 바인딩입니다.

HTML <-> JS  양쪽으로 데이터 갱신이 가능합니다. 

 

 - 장점 : 코드의 사용면에서 코드량을 크게 줄일 수 있습니다.

 - 단점 : 변화에 따라 DOM 객체 전체를 랜더링 해주거나 데이터를 바꿔주므로 성능이 감소되는 경우가 있습니다.

 

3. 양방향 바인딩(2 way data-binding) 경우 리렌더링의 흐름

출처: https://kr.vuejs.org/v2/guide/reactivity.html

• 부모 컴포넌트는 props를 통해 자식에게 데이터를 전달하고 자식은 events를 통해 부모로 메세지를 보낸다.
• 컴포넌트 watcher 라는 것이 있고, 데이터의 수정이 발생하면 다시 렌더링이 된다.
• 부모와 자식 컴포넌트 watcher라는 매개체를 통해 지속적으로 데이터를 일치시킨다.
• 이 구조는 대표적인 양방향 바인딩 라이브러리 Vue의 데이터 흐름을 도식화 한 것이다.

출처: https://itworldyo.tistory.com/124 [잇월드]