728x90
💭 기존의 웹 개발 방식인 Html과 JavaScript와 비교하여 Vue의 Reactivity를 구현하는 방법을 아주 간단히 알아보자!
❗Html, JavaScript로 웹 만들어보기
- 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때
• html 파일에서 ! 를 쓴 후 Tab 키를 누르면 아래와 같은 hmtl 양식을 손쉽게 작성할 수 있다.
<!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">hi hello</div>
<script>
var div = document.querySelector("#app"); //위의 div 태그의 정보를 가지고 옮.
var str = "hello Vue.js";
div.innerHTML = str;
str = "hello!!???";
</script>
</body>
</html>
<!--
div#app 작성 후 엔터 하면
<div id="app"></div>
$('#app');
document.querySelector('#app');
위 아래 같은거
-->- 결과
• 아래의 사진과 같이 str 출력이 값이 변경되기 전의 값을 출력하고 있음을 확인할 수 있다.
❗ Vue의 Reactivity(반응성) 웹 만들기
- 변수 str 를 생성하고 화면에 출력한 후 str 값을 변경했을 때
• 변경된 str 값이 바로 화면에 적용되는 반응성 웹
• Object.defineProperty() 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"></div>
<script>
var div = document.querySelector("#app");
var viewModel = {};
//Object.defineProperty(대상객체, 객체의 속성, {
// 정의할 내용
//}); //개체의 동작을 재정의하는 API
Object.defineProperty(viewModel, "str", {
get: function () {
//속성(viewModel.str)에 접근했을 때의 동작을 정의
console.log("viewModel.str에 접근함!");
},
set: function (newValue) {
//속성(viewModel.str)에 값을 할당 했을 때의 동작을 정의
console.log("viewModel.str에 할당함!", newValue);
div.innerHTML = newValue
},
});
</script>
</body>
</html>- 결과
• html, javascript로 작성된 화면과 다르게 viewModel 객체의 str 속성에 접근하게 되면 개발자도구 콘솔에서 접근했다는 문구가 보이게 되고 값을 할당하게 되면 할당했다는 문구와 할당한 값을 보여준다.
• 변수 viewModel.str 값을 변경하게 되면 변경된 값이 바로바로 화면에 적용되어 보여진다.
• 이러한 모습으로 vue.js의 반응성을 확인할 수 있다.
❗ Reactivity 코드 함수화 하기
- init()이라는 함수를 생성하여 위에 작성한 Object.defineProperty() 동작을 하도록 함
- render()라는 함수를 생성하여 div의 텍스트 값을 바꾸는 코드를 작성한 후 init()함수에서 실행하도록 함.
- 즉시 실행 함수로 함수 전체를 감싸준다.
<!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"></div>
<script>
var div = document.querySelector("#app");
var viewModel = {};
//Object.defineProperty(대상객체, 객체의 속성, {
// 정의할 내용
//}); //개체의 동작을 재정의하는 API
(function () {
function init() {
Object.defineProperty(viewModel, "str", {
get: function () {
//속성(viewModel.str)에 접근했을 때의 동작을 정의
console.log("viewModel.str에 접근함!");
},
set: function (newValue) {
//속성(viewModel.str)에 값을 할당 했을 때의 동작을 정의
console.log("viewModel.str에 할당함!", newValue);
render(newValue);
},
});
}
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
</body>
</html>- 결과
• 이전 결과와 동일하게 작동됨
🤷♀️ 즉시 실행함수?
• 즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression)은 정의 되자마자 즉시 실행되는 Javascript Function을 말한다.
• 첫번째 괄호 ()로 둘러싸인 부분은 익명함수 부분은 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지하고 내부안으로 다른 변수가 접근하는 것을 막는다.
• 두번째 괄호 ()는 즉시 실행함수를 생성하는 괄호이다. 이를 통해 자바스크립트 엔진은 함수를 직시 해석해서 실행한다.
출처 : https://developer.mozilla.org/ko/docs/Glossary/IIFE
(function () { statements })();`💕 위 내용은 인프런의 Vue.js 시작하기 - Age of Vue.js 를 참고하여 공부하며 개인적으로 정리한 내용입니다.
내용에 오류가 있거나 문제 사항은 댓글로 남겨주시면 감사하겠습니다!
반응형
'Programming > Vue.js' 카테고리의 다른 글
| [Vue.js 입문하기] 컴포넌트 통신 - props 속성 (0) | 2022.07.26 |
|---|---|
| [Vue.js 입문하기] 뷰 컴포넌트 (0) | 2022.07.21 |
| [Vue.js 입문하기] 뷰 인스턴스 (0) | 2022.07.21 |
| [Vue.js 입문하기] Vue.js란? (0) | 2022.07.20 |
| [Vue.js 입문하기] Vue.js 시작하기 (0) | 2022.07.20 |
