ES6 - Proxy

lingodingo·2020년 6월 30일
2

DailyStudy

목록 보기
1/3
post-thumbnail
@davidkovalenkoo from unsplash

이직을 원해서 어느 기업에 서류를 내고, 통과해서 사전 과제를 하게 되었다. 사전 과제 내용은 굉장히 쉬웠는데(물론 사전과제 탈락했지롱), 라이브러리나 프레임워크를 사용할 수 없었다. 나는 급하게 사전과제를 끝냈으나 파면 팔수록 내가 작성한 코드의 근본적인 질문을 하게 되었다.

Vaniila JS로 상태 관리를 해서 만들면 훨씬 쉽지 않았을까..?
(React로 작성했으면 훨씬 쉽지 않았을까?)

현재 다니고 있는 회사의 굇수분은 심심해서 Vanilla JS만을 이용하여 React 처럼 상태관리를 할 수 있게 만드셨던데(난 못하겠던데) 사전과제도 해당 내용과 비슷했어서 한 번 튜토리얼을 따라해보면서 만들어보기로 했다.

[여기를 클릭해서 해당 튜토리얼을 볼 수 있다]


상태 관리는 상태의 변화를 감지하는 것이 핵심인데, 도대체 변수가 바뀌는 것을 어떻게 알아차릴까가 궁금했다.

가장 먼저 생각난 방법은

1. 변수 선언하는 곳을 오직 한 함수에서만 담당하게 한다
(마치 set으로만 state를 변경하도록 하는 것)
2. set 함수가 불릴 때, 다른 컴포넌트를 render 시킨다.

역시 난 천재다. 이대로 코딩을 해보자.

const changeState: (value: object) => void = (value) => {
  globalState = {
    ...globalState,
    ...value,
  };
  // Observer pattern or Pub/Sub pattern을 이용하여
  // 변화를 감지한 컴포넌트 모두를 render 시킨다.
  pub.subscribers.map((sub) => sub.render());
};

오예! 내가 이렇게 규칙을 했으니까 이 룰을 잘 지키면서 개발한다면 아무 문제 없을 것이다.

근데 다른 사람이 이 룰을 숙지하지 못한채 globalState.a = b라고 다른 곳에서 써버리면 답이 없어진다. 이걸 막을 방법은 없으니깐.. 내 방법은 역시 쓰레기야! 라고 생각하던 도중, 해당 튜토리얼에서 굉장히 신기한 것을 발견했는데 바로 Proxy이다.


Proxy는 JS에서
a.b = 3;
console.log(a.c);
new classA();

와 같은 문법을 후킹할 수 있다. 무슨 말인고 하니

const a = new Proxy({}, {
  set: function (state, value, key) {
    console.log(state, value, key);
  },
});
a.foo = 'hi';

와 같이 코딩하고 실행하면 다음과 같은 console.log를 볼 수 있다.

> {} "foo" "hi"
> a.foo // undefined

심지어 a.foo는 할당되지도 않는다. a.foo = 'hi';는 a.foo를 set하는 것으로, Proxy가 이를 알아차리고 가로채버리는 것이다.

근데 할당은 시켜줬음 좋겠다. 감지도 하고 싶으면 다음과 같이 작성하면 된다.

const a = new Proxy({}, {
  set: function (state, value, key) {
    console.log(state, value, key);
    state[value] = key;
  },
});

a.foo가 불리는 것을 인식하기 위한 get도 있고 Proxy도 나름 여러 후킹 메서드를 지원한다. 사실 Proxy도 Observer pattern으로 충분히 대체할 수 있지만 Proxy가 뭔가 더 깔끔해보인다.

해당 튜토리얼은 위의 방법으로 변수가 바뀌는 것을 감지했더라. 와우..

Proxy가 후킹할 수 있는 옵션은 다음과 같다. 자세한건 MDN을 참조하자.

get, set, has, deleteProperty, apply, construct, getOwnPropertyDescriptor, defineProperty, getPrototypeOf, setPrototypeOf, ownKeys, perventExtensions, isExtensible

profile
Frontend developer

0개의 댓글