양방향 바인딩은 무엇일까요? 양방향 바인딩을 사용하는 경우 리렌더링이 어떻게 이루어질 지 그려보세요. (부모 컴포넌트 A와 자식 컴포넌트 B가 있음을 가정하고 그려봅시다.)
-
데이터 바인딩(Data Binding)이란, 화면상에 보여지는 데이터(View)와 브라우저 메모리에 있는 데이터(Model)를 묶어서(Binding) 서로 간의 데이터를 동기화하는 것을 의미한다.
-
예를 들어서, HTML에서 서버 혹은 스크립트상에서 받아온 데이터를 화면상에 그려주고 있다고 가정했을 때, 해당 값이 변경이 될 경우 다시 HTML 상에 데이터(값)를 변경된 값에 따라서 맞추어 주는 동작을 '데이터 바인딩'이라고 한다.
-
컴포넌트 내에서 '단방향 데이터 바인딩'은 Javascript(Model)에서 HTML(View)로 한 방향으로만 데이터를 동기화하는 것을 의미한다. 단방향 데이터 바인딩이기에 역으로 HTML(View)에서 JS(Model)로의 직접적인 데이터 갱신은 불가능하다. '이벤트 함수'를 주고 함수를 호출한 뒤 JS에서 HTML로 데이터를 변경해야만 한다.
-
컴포넌트 내에서 '양방향 데이터 바인딩'은 JS(Model)와 HTML(View) 사이에 ViewModel이 존재하여 하나로 묶여서 둘 중 하나만 변경되어도 함께 변경되는 것을 의미한다.
-
대표적으로 SPA Framework에서는 React에서 단방향 데이터 바인딩을 하고, Vue.js, Angular에서 양방향 데이터 바인딩을 한다.
