상세 컨텐츠

본문 제목

Vue.js 시작하기 - Reactivity

Programming/Vue.js

by 겨리! 2022. 3. 7. 16:02

본문

 

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>

즉시 실행 함수 : 정의되자마자 즉시 실행되는 함수

사용하는 이유 → 코드가 사용자에게 노출되지 않도록 변수 유효범위를 분리함!

 


참고

https://developer.mozilla.org/ko/docs/Glossary/IIFE

관련글 더보기

댓글 영역