[Vue] Refs의 종류

References

https://v3.ko.vuejs.org/api/refs-api.html#ref

https://velog.io/@soulee__/Vue.js-공식문서-뜯어보기-Refs

 

ref

내부에 값을 가지면서 반응적이고 변경 가능한 ref 라는 객체를 반환한다.

이때, ref 객체는 단 하나의 프로퍼티만을 가지는데 이 내부 값은 .value 로 사용된다.

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

 

unref

주어진 인자가 ref 라면 내부 값(.value )을 반환하고 아니라면 주어진 인자를 반환한다. (삼항연산자 과정 간소화)

function useFoo(x: number | Ref<number>) {
  // unwrapped is guaranteed to be number now
	const unwrapped = unref(x) 
}

 

toRef

소스가 되는 reactive 객체의 속성을 가져와 ref 를 만들 수 있다.

또한 이러한 과정으로 만들어진 ref 는 여러 군데 인자로 전달이 가능하고 소스 객체에 의해 reactive연결을 유지할 수 있다.

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

const fooRef = toRef(state, 'foo')

fooRef.value++
console.log(state.foo) // 2

state.foo++
console.log(fooRef.value) // 3

또한, toRef 는 props 의 ref 를 컴포지션 함수(setup )에 전달 또한 가능하다.

// 소스객체에 해당 프로퍼티가 당장 존재하지 않아도 사용 가능한 참조사항을 반환할 수 있다.
export default {
  setup(props) {
    useSomeFeature(toRef(props, 'foo'))
  }
}

 

toRefs

reactive 객체를 일반 객체(plane object)로 변환 후 반환하는데 여기서 반환되는 객체의 각 프로퍼티들이 ref 로 원래 reactive 객체 프로퍼티로 연결된다.

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

const stateAsRefs = toRefs(state)
/*
Type of stateAsRefs:

{
  foo: Ref<number>,
  bar: Ref<number>
}
*/

// The ref and the original property is "linked"
state.foo++
console.log(stateAsRefs.foo.value) // 2

stateAsRefs.foo.value++
console.log(state.foo) // 3

또한, toRefs 는 사용하는 곳의 reactivity를 읽는 것이 아닌 destructure 및 spread를 할 수 있는 형태이다.

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

  // logic operating on state

  // convert to refs when returning
	// 소스 객체에 포함 된 속석에 대한 ref만 생성하므로 특정 속성에 대한 참조를 만들고자 한다면 toRef를 대신 사용한다
  return toRefs(state)
}

export default {
  setup() {
    // can destructure without losing reactivity
    const { foo, bar } = useFeatureX()

    return {
      foo,
      bar
    }
  }
}

 

isRef

주어진 값이 ref 객체인지 확인한다.

 

customRef

종속성 추적 및 업데이트 트리거를 명시적을 커스터마이징 가능한 ref 객체를 생성한다.

track과 trigger 함수를 인수로 받고 get과 set함수를 가진 객체를 반환하는 factory 함수를 인자로 넘긴다.

function 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('hello')
    }
  }
}

참고로 customRef 의 지정 타입은 다음과 같다.

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>

type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T
  set: (value: T) => void
}

 

shallowRef

자기 자신의 내부 값(.value)이 변경되는 것은 추적하되, 내부 값 자체를 reactivity하게 만들지 않는 ref를 만든다.

const foo = shallowRef({})
// ref의 .value가 변경되는것은 반응하지만
foo.value = {}
// 값 자체는 반응형이 아님
isReactive(foo.value) // false

 

triggerRef

shallowRef 에 연결된 모든 이펙트를 수동으로 실행한다.

const shallow = shallowRef({
  greet: 'Hello, world'
})

// Logs "Hello, world" once for the first run-through
watchEffect(() => {
  console.log(shallow.value.greet)
})

// This won't trigger the effect because the ref is shallow
shallow.value.greet = 'Hello, universe'

// Logs "Hello, universe"
triggerRef(shallow)