728x90
반응형

💭 기존의 웹 개발 방식인 Html과 JavaScript와 비교하여 Vue의 Reactivity를 구현하는 방법을 아주 간단히 알아보자!

❗Html, JavaScript로 웹 만들어보기

  1. 변수 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');
    위 아래 같은거
-->
  1. 결과
    • 아래의 사진과 같이 str 출력이 값이 변경되기 전의 값을 출력하고 있음을 확인할 수 있다.

❗ Vue의 Reactivity(반응성) 웹 만들기

  1. 변수 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>
  1. 결과
    • html, javascript로 작성된 화면과 다르게 viewModel 객체의 str 속성에 접근하게 되면 개발자도구 콘솔에서 접근했다는 문구가 보이게 되고 값을 할당하게 되면 할당했다는 문구와 할당한 값을 보여준다.
    • 변수 viewModel.str 값을 변경하게 되면 변경된 값이 바로바로 화면에 적용되어 보여진다.
    • 이러한 모습으로 vue.js의 반응성을 확인할 수 있다.

❗ Reactivity 코드 함수화 하기

  1. init()이라는 함수를 생성하여 위에 작성한 Object.defineProperty() 동작을 하도록 함
  2. render()라는 함수를 생성하여 div의 텍스트 값을 바꾸는 코드를 작성한 후 init()함수에서 실행하도록 함.
  3. 즉시 실행 함수로 함수 전체를 감싸준다.
<!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>
  1. 결과
    • 이전 결과와 동일하게 작동됨

🤷‍♀️ 즉시 실행함수?

• 즉시 실행 함수 표현(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

티스토리툴바