카테고리

질문 & 답변
세부 분야

프론트엔드
해결 여부

해결됨

데이터 바인딩 관련 질문입니다..

20.06.06 03:30 작성 조회수 96

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<div id="app"></div>

<script>
// 대부분의 오픈소스 라이브러리들은 IIFE를 활용한다.
(function () {
function init() {
var div = document.querySelector("#app");
var viewModel = {};

Object.defineProperty(viewModel, "str", {
get: function () {
console.log("접근");
},

set: function (newValue) {
console.log("할당", newValue);
render(newValue);
},
});
}

function render(value) {
div.innerHTML = value;
}

init();
})();
</script>
</body>
</html>

질문이 있습니다.
데이터 바인딩이라는 것이 viewModel을 Object.defineProperty(viewModel) 하는 것까지이고 set이라는 속성을 통해 데이터값에 변화가 있다면 화면에 재랜더링 하는 것을 Reactivity 라고 생각하면 될까요?

아니면 데이터 바인딩라는 개념에 Reactivity를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?