Vue3 - Refs

📌 목차

• Introduction
• ref
• unref
• toRef
• toRefs
• isRef
• customRef
• shallowRef
• triggerRef
• Conclusion
• Reference

📌 Introduction

안녕하세요. 이번 포스팅은 vue3의 refs에 대해 알아보겠습니다. 해당 코드는 여기서확인 하실수 있습니다.

📌 ref

ref inner value로 reactive하고 mutable한 객체를 반환합니다. ref 객체는 value property를 가지고 있습니다.

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const onClick = () => {
      console.log(count);
      //  {
      // __v_isRef: true
      // _rawValue: 1
      // _shallow: false
      // _value: 1
      // }
      count.value++;
      console.log(count.value); // 1
    };

    return {
      onClick,
    };
  },
};

📌 unref

unref는 inner value를 반환합니다.

import { ref, unref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    const onClick = () => {
      cosnole.log(count.value); // 0
      count.value++;
      console.log(unref(count)); // 1
    };

    return {
      onClick,
    };
  },
};

📌 toRef

toRef는 reactive 객체에 대해 ref를 생성할 수 있습니다.

<script>
import { reactive, toRef } from 'vue';

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

    const fooRef = toRef(state, 'foo');

    const onClick = () => {
      console.log(state); // { foo: 1, bar: 2 }
      fooRef.value++;
      console.log(state); // { foo: 2, bar: 2 }
    };

    return {
      onClick
    };
  },
};
</script>

📌 toRefs

toRefs는 toRef와 비슷하지만 특정 property를 받지 않습니다.

import { reactive, toRef, toRefs } from 'vue';

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

    const stateRef = toRefs(state);

    const onClick2 = () => {
      console.log(state); // { foo: 1, bar: 2 }
      stateRef.foo.value++;
      stateRef.bar.value++;
      console.log(state); // { foo: 2, bar: 3 }
    };

    return {
      onClick2
    };
  },
};

이렇게도 사용이 가능합니다.

// useFeatureX.js

import { reactive, toRefs } from 'vue';

const useFeatureX = () => {
  const state = reactive({
    foo: 1,
    bar: 2
  });

  return toRefs(state);
};

export default useFeatureX;

// ToRefsPractice.vue
import useFeatureX from '../store/useFeatureX';

export default {
  setup() {
    const { foo, bar } = useFeatureX();

    const onClick = () => {
      foo.value++;
      bar.value++;
      console.log('foo bar', { foo: foo.value, bar: bar.value }); // foo: 2 bar: 3
    };

    return {
      onClick,
    };
  },
};

📌 isRef

isRef는 해당 객체가 ref인지 아닌지를 판별해 주는 함수 입니다.

import useFeatureX from '../store/useFeatureX';
import { isRef } from 'vue';

export default {
  setup() {
    const { foo, bar } = useFeatureX();

    const onClick = () => {
      console.log('isRef(foo)', isRef(foo)); // true ⭐️
      console.log('isRef(bar)', isRef(bar)); // true ⭐️
    };

    return {
      onClick,
    };
  },
};

📌 customRef

customeRef는 외부적으로 통제권을 얻어 컨트롤할 수 있습니다. 예제로 debounce를 적용한 ref를 적용해보겠습니다.

import { customRef } from 'vue';

const useDebouncedRef = (value, delay = 200) => {
  let timeout;
  return customRef((track, trigger) => {
    return {
      get() {
        track();
        return value;
      },
      set(newValue) {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
          value = newValue;
          trigger();
        }, delay);
      }
    };
  });
};

export default {
  setup() {
    return {
      text: useDebouncedRef('helllo', 1000)
    };
  }
};

📌 shallowRef

shallowRef는 이름에서 알 수 있듯이 shallow한 ref를 반환하는 함수 입니다.

import { shallowRef, isRef } from 'vue';

export default {
  setup() {
    const foo = shallowRef({ value: { bar: 2 } });
    const onClick = () => {
      console.log('isRef(foo)', isRef(foo)); // true ⭐️
      console.log('isRef(foo.value)', isRef(foo.value)); // false  ⭐️
    };

    return {
      onClick
    };
  }
};

📌 triggerRef

triggerRef는 shallowRef에 관련된 것에서만 수동으로 watchEffect와 같은 효과를 줄 수 있습니다.

import { shallowRef, triggerRef, watchEffect } from 'vue';

export default {
  setup() {
    const shallow = shallowRef({
      greet: 'HELLO'
    });

    watchEffect(() => {
      console.log(shallow.value.greet); // created 될때만 HELLO가 찍힙니다.
    });
    shallow.value.greet = 'HI'; // 아무런 log가 찍히지 않습니다.

    const onClick = () => {
      triggerRef(shallow); // triggerRef를 해주어야 log HI가 찍힙니다. ⭐️
    };
    return {
      onClick
    };
  }
};

📌 Conclusion

오늘은 vue3의 ref에 관해 알아보았습니다. 이제 슬슬 헷갈리기 시작하는데요. 실제로 reactive와 ref가 어떠한 차이를 보이는지 어떻게 쓰이는지에 대해서는 조금더 공부가 필요할 것 같습니다. 그럼 다음 포스팅에서 만나요~

📌 Reference

• Vue3 공식문서