티스토리 뷰

개발

[Js] Proxy 객체로 Data Binding 구현하기

Mr.Ban 2022. 8. 30. 17:51

Vue를 공부하다 보니 Proxy 객체를 종종 보게 되더라구요. 그래서 찿아본김에 간단한 예제를 만들어 보았습니다.

Label 요소에 Data를 바인딩해보는 예제입니다. Data 변경시 Label도 같이 바뀌도록 하겠습니다.

 

기본원리

객체에 어떤 작업을 가할 때 javascript에 내부 메서드(internal method)가 관여합니다.

proxy는 이 내부 메서드에 대응하는 트랩이 있으며, 트랩을 구현하면 해당 내부 메서드 동작시 트랩이 가로채서 별도의

처리를 할 수 있게됩니다. 거꾸로 가정하여 어떠한 트랩도 구현되지 않으면 투명한 wrapper로 동작하여 proxy target에

가하는 작업은 있는 그대로 처리될 것입니다. 

let obj = {say:'hello'}
obj = new Proxy(obj, {})	// handler 등록을 하지 않을 시
console.log(obj.say)
// hello

proxy 동작 원리
내부 메서드와 트랩

Proxy 생성

person 객체의 name 속성이 변경될 때 Label 변경을 하도록 하는 Proxy를 생성해줍니다.

 

// script
let person = {name : ''};
let proxyPerson;

$(document).ready(() =>{
  // 라벨 객체 조회
  const label = document.querySelector('#name');

  // proxy 핸들러 정의
  const handlerPerson = {
    set(target, prop, newval){
      // name 으로 접근시 처리
      if(prop === 'name'){
      	// lable 값을 입력값으로 설정한다!
        label.textContent = newval;
        // target 값도 바꿔준다
        target[prop] = newval;
      }
      
      return true;
    }
  }
  
  // Proxy 생성,  new Proxy(<target>, <handler>)
  proxyPerson = new Proxy(person, handlerPerson);
});

Proxy 적용

<!-- html -->
<body>
  <label id="name">이름</label>
  <hr/>
  <label for="">데이터</label>
  <input id='data' type="text" oninput="insertInput(event)">
  <button onclick="insertData()">데이터입력</button>
</body>

html

'데이터입력' 버튼 클릭시 Proxy 데이터를 조작합니다.

const insertData = () => {
  proxyPerson.name = document.querySelector('#data').value;
}

결과

proxyPerson.name의 setter 함수를 통하여 person.name과 Label 값이 변경되는것을 확인할 수 있습니다.

결론

지금 예제에서는 Handler의 set function만 정의하여 구현하였지만 다양한 Handler function이 존재합니다.

기존 target 객체를 재정의하거나 확장하는것이 무궁무진하다는 것이지요.

이러한 Proxy 객체 기반에서 현재 Javascript Framework를 보면 조금 더 이해하기 쉽지 않을까요. 

감사합니다.

 

 

'개발' 카테고리의 다른 글

[Js] Object Property에 대해 알아보자  (0) 2022.11.06
[JS] Null인 경우 값 설정 연산, Nullish coalescing operator (??)  (0) 2022.10.30
[JS] function keyword 없는 함수  (0) 2022.09.01
[JS] ES modules 와 Destructuring Assign(분해구조 할당)  (2) 2022.08.31
Naming 규칙 명칭 간단 정리 ('_' , '-', 'MyApp', 'myApp')  (0) 2022.08.25
댓글