[Vue.js] reactivity와 IIFE(즉시 실행함수)

reactivity와 IIFE(Immediately Invoked Function Expression:즉시 실행함수)

 

반응을 감지해서 value를 넣어주는 기능을 반응성(reactivity)라고 합니다. Object.defineProperty(대상 객체, 객체의 속성, {정의할 내용}의 형식으로 작성해 div.innerHTML에 value를 set으로 재할당해 값이 변경될 때마다 <div>에 출력해줄 수 있습니다. 반응성은 Vue에 반영이 되어 있기 때문에 직접 정의하지 않아도 Vue 객체를 활용해 사용할 수 있습니다.

    var viewModel = {};

    //객체의 동작을 재정의하는 메소드
    Object.defineProperty(viewModel, 'str', {
      // 속성의 접근했을 떄의 동작을 정의
      get: function() {
        console.log('접근');
      },
      set: function(newValue) {
        console.log('할당', newValue);
        div.innerHTML = newValue;
      }
    });

defineProperty 메서드를 실행시키기 위해 즉시실행함수를 사용할 수 있습니다. IIFE라고 불리는 즉시실행함수는 스코프 내에서 사용할 수 있기 때문에 접근을 제한하는 캡슐화의 장점이 있습니다.

    //즉시 실행함수: 다른 스코프에 노출되지 않고 실행이 가능함
    (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();
    })();

---

참고자료: 인프런 - 캡틴판교 Vue.js 시작하기