인프런 커뮤니티 질문&답변

열씨미살자!님의 프로필 이미지
열씨미살자!

작성한 질문수

Vue.js 시작하기 - Age of Vue.js

데이터 바인딩과 computed 속성

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

해결된 질문

작성

·

136

1

<!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를 포함해서 데이터와 뷰연결 + 데이터가 바뀔시 화면 재랜더링 까지 포함되어있는건가요?

답변 1

1

안녕하세요 동우님, 좋은 질문입니다. 말씀하신대로 화면을 다시 그리는 것이 Reactivity, 그리고 데이터를 화면에 엮어 표현하는 동작이 데이터 바인딩으로 이해하시면 좋을 것 같아요 :)

열씨미살자!님의 프로필 이미지
열씨미살자!

작성한 질문수

질문하기