Vue3 - Basic Reactivity APIs

📌 목차

• Introduction
• reactive
• readonly
• isProxy
• isReactive
• isReadonly
• toRaw
• markRaw
• shallowReactive
• shallowReadonly
• Conclusion
• Reference

📌 Introduction

안녕하세요. 오늘은 vue3의 새로운 reactive apis에 대해 알아보겠습니다. 해당 코드는 여기서 확인할 수 있습니다.🎉

📌 reactive

reactive는 deep-copy된 object를 반환합니다.

import { reactive } from 'vue';

export default {
  name: 'App',
  setup() {
    const obj = reactive({ count: 0 });
    const copy = obj.count;

    const onClickButton = () => {
      console.log(obj.count === copy.count); // false ⭐️
    };

    return {
      obj,
      onClickButton,
    };
  },
};
</script>

위의 코드처럼 reactive는 deep-copy된 object를 return합니다. 따라서 obj.count와 copy.count는 서로 다른것을 볼 수 있습니다.

📌 readonly

readonly는 object를 readonly proxy로 된 deep-copy object를 반환합니다.(reactive, plain, ref 모두 적용 가능)

import { readonly, reactive } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    const readOnlyState = readonly(state);
    const readOnlyCopy = readOnlyState.count;

    const onClickPlus = () => {
      state.count++;
      readOnlyState.count++; // warning !!! ⭐️
      console.log(readOnlyState.count === readOnlyCopy); // false ⭐️
    };

    return {
      state,
      readOnlyState,
      onClickPlus,
    };
  },
};

위 코드에서 보이는 것처럼 readonly를 바꿔주게 되면 warning을 발생 시킵니다. 또한 deep-copy를 지원하기 때문에 readOnlyState.count와 readOnlyCopy의 값은 서로 다릅니다.

📌 isProxy

isProxy는 해당 객체가 reactive인지 readonly인지 판별하는 함수 입니다.

import { readonly, reactive, isProxy } from 'vue';

export default {
  setup() {
    const state = reactive({ count: 0 });
    const readOnlyState = readonly(state);
    const readOnlyCopy = readOnlyState.count;

    const onClickPlus = () => {
      state.count++;
      readOnlyState.count++; // warning !!!
      console.log(readOnlyState.count === readOnlyCopy); // false
    };

    const onClickCheck = () => {
      console.log('isProxy(state) -> reactive', isProxy(state)); // true
      console.log('isProxy(readOnlyState) -> readonly', isProxy(readOnlyState)); // true
      console.log('isProxy(readOnlyCopy)', isProxy(readOnlyCopy)); // false
    };

    return {
      state,
      readOnlyState,
      onClickPlus,
      onClickCheck,
    };
  },
};

📌 isReactive

isReactive는 isProxy와는 다르게 reactive로 만들어진 객체인지 판별합니다.

export default {
  setup() {
    const state = reactive({ count: 0 });
    const readOnlyState = readonly(state);
    const readOnly = readonly({ count: 0 });
    const readOnlyCopy = readOnlyState.count;

    const onClickCheckReactive = () => {
      console.log('isReactive(state)', isReactive(state)); // true ⭐️
      console.log('isReactive(readOnlyState)', isReactive(readOnlyState)); // true ⭐️
      console.log('isReactive(readOnly)', isReactive(readOnly)); // false
      console.log('isReactive(readOnlyCopy)', isReactive(readOnlyCopy)); // false
    };

    return {
      state,
      readOnlyState,
      onClickCheckReactive,
    };
  },
};

이렇게 값이 나오게 됩니다. 신기한건 reactive객체를 readonly객체로 바꾸어주는건 여전히 true값이 나오게 됩니다.

📌 isReadonly

isReadonly는 객체가 readonly proxy인지를 알려줍니다.

export default {
  setup() {
    const state = reactive({ count: 0 });
    const readOnlyState = readonly(state);
    const readOnly = readonly({ count: 0 });
    const readOnlyCopy = readOnlyState.count;

    const onClickCheckReadonly = () => {
      console.log('isReadonly(state)', isReadonly(state)); // false
      console.log('isReadonly(readOnlyState)', isReadonly(readOnlyState)); // true
      console.log('isReadonly(readOnly)', isReadonly(readOnly)); // true
      console.log('isReadonly(readOnlyCopy)', isReadonly(readOnlyCopy)); // false
    };

    return {
      state,
      readOnlyState,
      onClickCheckReadonly,
    };
  },
};

📌 toRaw

toRaw함수는 reactive나 readonly 객체를 다시 원상태로 복구해 줍니다.

export default {
  setup() {
    const state = reactive({ count: 0 });
    const readOnly = readonly({ count: 0 });
    const rawState = toRaw(state);
    const copyRawStateCount = rawState.count;
    const rawReadOnly = toRaw(readOnly);
    const copyRawReadOnlyCount = rawReadOnly.count;

    const onClick = () => {
      // true ⭐️
      console.log('rawState.count === copyRawStateCount', rawState.count === copyRawStateCount); 
      // true ⭐️
      console.log('rawReadOnly.count === copyRawReadOnlyCount', rawReadOnly.count === copyRawReadOnlyCount); 
    };

    return {
      onClick
    }
  }
}

toRaw로 반환된 객체는 deep-copy가 되지 않는것을 알 수 있습니다.

📌 markRaw

markRaw는 reactive하게 하거나 readonly 같은 proxy를 사용 못하게 합니다. 반환 값은 객체입니다.

import { reactive, readonly, markRaw, isProxy } from 'vue';

export default {
  setup() {
    const foo = markRaw({});
    const state = reactive(foo);
    const readOnly = readonly(foo);

    const onClick = ()  => {
      console.log('isProxy(state)', isProxy(state)); // false ⭐️
      console.log('isProxy(readOnly)', isProxy(readOnly)); // false ⭐️
    };

    return {
      onClick
    }
  }
}

markRaw를 사용하는 이유는 다음과 같습니다.

• 뷰 컴포넌트나 복잡한 클래스를 reactive하지 않게 만듭니다.
• 대규모 데이터에 대해 proxy conversion을 막아 퍼포먼스를 높입니다.

하지만 이런 위험성을 가지고 있긴 합니다.(Identity hazards)

const foo = markRaw({
  nested: {}
})

const bar = reactive({
  // foo는 markRaw이지만 내부는 그렇지 않습니다. ⭐️
  nested: foo.nested
})

console.log(foo.nested === bar.nested) // false

📌 shallowReactive

shallowReactive는 reactive를 지원하지만 deep reactive conversion은 지원하지 않습니다.

import { shallowReactive, isReactive } from 'vue';

export default {
  setup() {
    const state = shallowReactive({ foo: 0, nested: { bar: 2 } });

    const onClick = () => {
      console.log('isReactive(state', isReactive(state)); // true
      console.log('isReactive(state.foo)', isReactive(state.foo)); // false
      console.log('isReactive(state.foo.nested)', isReactive(state.foo.nested)); // false
    };

    return {
      onClick
    };
  }
};

📌 shallowReadonly

shallowReadonly는 readonly를 지원하지만 shallowReactive와 마찬가지로 deep readonly conversion은 지원하지 않습니다.

import { shallowReadonly, isReadonly } from 'vue';

export default {
  setup() {
    const state = shallowReadonly({ foo: 1, nested: { bar: 2 } });

    const onClick = () => {
      console.log('isReadonly(state)', isReadonly(state)); // true
      console.log('isReadonly(state.foo)', isReadonly(state.foo)); // false
      console.log('isReadonly(state.foo.nested)', isReadonly(state.foo.nested)); // false
    };

    return {
      onClick
    };
  }
};

📌 Conclusion

오늘은 basic reactivity apis에 대해 알아보았습니다. 그럼 다음 포스팅에서 만나요~ 🤟🏻

📌 Reference

• vue3 공식 문서