Vue.js 3.0의 옵저버 패턴

    ▲ 그림 1-14 Vue.js 공식 사이트

    프런트엔드에서 많이 쓰는 프레임워크 Vue.js 3.0에서 refreactive로 정의하면 해당 값이 변경되었을 때 자동으로 DOM에 있는 값이 변경되는데, 이는 앞서 설명한 프록시 객체를 이용한 옵저버 패턴을 이용하여 구현한 것입니다.

     

    용어

    ––– DOM(Document Object Model)

    문서 객체 모델을 말하며, 웹 브라우저상의 화면을 이루고 있는 요소들을 지칭한다.

     

    자바스크립트

    function createReactiveObject(
        target: Target,
        isReadonly: boolean,
        baseHandlers: ProxyHandler<any>,
        collectionHandlers: ProxyHandler<any>,
        proxyMap: WeakMap<Target, any>
    ) {
        if (!isObject(target)) {
            if (__DEV__) {
                console.warn(`value cannot be made reactive: ${String(target)}`)
            }
            return target
        }
        // target is already a Proxy, return it.
        // exception: calling readonly() on a reactive object
        if (
            target[ReactiveFlags.RAW] &&
            !(isReadonly && target[ReactiveFlags.IS_REACTIVE])
        ) {
            return target
        }
        // target already has corresponding Proxy
        const existingProxy = proxyMap.get(target)
        if (existingProxy) {
            return existingProxy
        }
        // only a whitelist of value types can be observed.
        const targetType = getTargetType(target)
        if (targetType === TargetType.INVALID) {
            return target
        }
        const proxy = new Proxy(
            target,
            targetType === TargetType.COLLECTION ? collectionHandlers : baseHandlers
        )
        proxyMap.set(target, proxy)
        return proxy
    }

    앞의 코드는 실제로 Vue.js 3.0의 옵저버 패턴이 담긴 코드입니다. proxyMap이라는 프록시 객체를 사용했고, 객체 내부의 get(), set() 메서드를 사용한 것을 볼 수 있습니다.

    신간 소식 구독하기
    뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.