Reactivity 란
: 반응성. 값이 변했을 때 이를 감지하고 곧바로 반응하는 것을 의미한다.
Reactivity는 vue의 특징 중 하나로 데이터의 변화를 라이브러리에서 감지하여 화면에 알아서 그려주는 것을 뜻한다.
쉽게 말해 데이터의 변화에 따라 화면이 자동으로 그려짐!
[기존 웹 개발 방식(HTML, Javascript)]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector("#app");
var str = 'hello world'
div.innerHTML = str
str = 'hello world!!!'
div.innerHTML = str
// str이라는 변수에 값을 재할당하면
// innerHTML를 이용해서 다시 바인딩해야 반영이된다.
</script>
</body>
</html>vue를 사용하면 위의 예제처럼 매번 함수를 생성하지 않아도 된다!
[Reactivity 구현]
- Object.defineProperty() 활용하기
Object.defineProperty(대상객체, 객체의 특정 속성, {
//정의할 내용...
})
: 객체의 특정 속성의 동작을 재정의하는 API
-> 이 API를 활용하면 대상객체에 접근할 때와 할당할 때 특정한 액션을 취해주도록 설정할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<script>
// 방금 생성한 div 태그의 정보를 변수에 담음
var div = document.querySelector('#app');
//div.innerHTML = 'hello world'
//이제 위처럼 하지않고!
var viewModel = {};
// Object.defineProperty(대상객체, 객체의 특정 속성, { 정의할 내용... }) : 객체의 특정 속성의 동작을 재정의하는 API
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의하는 곳
// 즉 viewModel.str에 접근했을 때 어떤 동작을 할건지 정의하는 곳임
get: function(){
console.log('접근!');
// 즉!! 개발자도구 콘솔창에서 viewMode.str 입력하면 접근!이라는 문자열이 출력된다.
},
// 속성에 값을 할당했을 대의 동작을 정의하는 곳
set: function(newValue){
console.log('할당!', newValue);
// 개발자도구 콘솔창에서 viewMode.str = 10; 이런식으로 할당해주면 할당! 10 이라는 문자열이 출력된다.
}
});
</script>
</div>
</body>
</html>[Reactivity 코드 라이브러리화 하기]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<script>
var div = document.querySelector('#app');
var viewModel = {};
// 즉시 실행 함수에 init()과 render() 함수 넣어주기
(function(){
function init(){
Object.defineProperty(viewModel, 'str', {
get: function(){
console.log('접근!');
},
set: function(newValue){
console.log('할당!', newValue);
render(newValue);
}
});
}
function render(value){
div.innerHTML = value;
}
init();
})();
</script>
</div>
</body>
</html>즉시 실행 함수 : 정의되자마자 즉시 실행되는 함수
사용하는 이유 -> 코드가 사용자에게 노출되지 않도록 변수 유효범위를 분리함!
[참고]
개발하는 겨리