[ Vue 3 ] Reactivity

 

 

 

 

 

 

Reactivity

 

reactivity.html 생성

 

<div id="app"></div>
<script>
  var data = {
    a: 10,
  };
</script>

data 라고 하는 변수를 선언, 객체화 하고 객체의 속성이 a 그리고 a에 10이라는 값을 집어넣었다.

 

 

위에는 가장 기본적인 js코드를 작성한 상태이고,

JavaScript API를 사용해볼텐데

Proxy를 사용해보자

 

 

Proxy

대리인, 대리 라는 뜻

redefine fundamental operations for that object

자바스크립트에서 프록시 객체는 대상객체를 감싸서, 속성 조회, 할당, 열거 및 함수 호출 등의 여러 기본동장을 가로채

특별한 다른동작을 가미시키는 대리자 역할을 한다.

get, set, has 등 메서드를 사용할 수 있다 

 

<div id="app"></div>
<script>
  var data = {
    a: 10,
  };

  new Proxy(data, { 
  
  })
</script>

new Proxy 선언하고, data라는 타겟값을 집어넣는다

첫번째 인자에 data, 위에서 선언한 객체를 넘긴거고,

두번째 인자에 data의 동작을 정의하는 새로운 인자를 넣을건데

여기서 정의할 수 있는게 set 혹은 get 이 있다.

 

 

 

<div id="app"></div>
<script>
  var data = {
    a: 10,
  };

  var app = new Proxy(data, { 
    get(){
    console.log('hi')
    }
  })
</script>

 

app의 내용이 바뀌게 되면 data의 내용도 같이 바뀌게 되는것이

new proxy라고 하는 API의 동작이다.

> 라이브서버로 화면 출력해보자

console창에서 app.a 를 입력하면 'hi'가 출력되는데,

new proxy가 data라고 하는 객체를 모방한 다음 동작을 추가했다고 보면 된다.

 

 

새로 쓰거나 변경하는걸 set() 진행해보자

<div id="app"></div>
<script>
  var data = {
    a: 10,
  };

  var app = new Proxy(data, {
    get() {
      console.log("값 접근");
    },
    set() {
      console.log("값 갱신");
    },
  });
</script>

위에 코드를 작성하고 저장, 다시 라이브서버를 봐보자

 

 

값 접근(get)과 값 갱신(set)의 값을 볼 수 있는데,

프록시를 통해서 객체의 동작을 정의할 수 있다는것을 확인 할 수 있다.

 

 

 

일단 mdn문서

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Proxy

https://developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/Introduction

 

 

프록시를 통해 어떤 값에 접근하거나 변경했을때, 이걸 화면에서 출력되게 해보자

set을 통해 값에 접근해서 갱신할 수 있기때문에 set을 이용한다.

 

전체코드

<div id="app">
  <!-- 여기서 뭔가 렌더링 된다.-->
</div>

<script>
  var data = {
    message: 10,
  };
  function render(sth) {
    var div = document.querySelector("#app");
    // div tag에 접근할 수 있는 DOM API
    // DOM API : HTML 태그 정보를 접근 할 수 있는 기능
    div.innerHTML = sth;
  }

  var app = new Proxy(data, {
    get() {
      console.log("값 접근");
    },
    set(target, prop, newValue) {
      // handler.set의 기본 규격
      console.log("값 갱신");
      target[prop] = newValue;
      render(newValue);
    },
  });
</script>

 

1. message의 값을 지정해준다. ( 객체의 속성 )

2. 화면에 출력하기 위해서는 div를 사용해야 하고

3. render()함수를 사용 - document.querySelector을 이용 괄호안에 div의 id값 'app'를 넣어준다

4. div태그에 접근할 수 있는 도큐멘트쿼리셀렉터라고 하는 DOM API를 쓰게 된다.

5. var div 값에 넣고 -> div 태그는 html element를 의미하는것이다.

6. div.innerHTML을 이용해서 sth을 집어넣게 되면 render의 값이 화면(div태그)에 출력되게 된다.

7. set의 (target, property, value) 기본 규격을 이용한다.

8. target[prop] = value : 객체의 속성값에다가 새로운값(newValue)을 넣어준다.

9. render()에 새롭게 셋팅된값을 집어넣어주면 화면에 출력이된다.

 

 

 

 

 

위의 동작이 구현되는걸 그림으로 보자면 

 

 

내부동작은 vue에 위임을 하고 우리는 data로 선언해서 화면을 개발해나가면 되는것