[Vue.js 공식문서 뜯어보기] Refs

ref

• 내부 값을 취하고 반응적이고 변경 가능한 ref 객체를 반환
• ref 객체에는 .value 내부 값을 가르키는 단일 속성이 있음

const count = ref(0)
const foo = ref<string | number>('foo')

// 제네릭 유형을 알 수 없는 경우 Ref<T>로 타입 캐스팅
function useState<State extends string> (initial: State) {
  const state = ref(initial) as Ref<State>
   // state.value -> State extends string
  return state
}

unref

• 인수가 ref이면 내부 값을 반환하고, 그렇지 않으면 인수 자체를 반환
• val = isRef(val) ? val.value : val

function useFoo(x: number | Ref<number>) {
  	const unwrapped = unref(x)
    // unwrapped 값이 number가 될 것임을 보장!
    // 이 때, x가 Ref면 x.value를 return, 아니면 x 자체를 Return
}

toRef

• Reactive 객체의 속성을 하나의 단일 ref 객체로 만들 때 사용된다.
• 참조를 전달하여 원본 속성에 대한 반응적 연결을 유지할 수 있다.

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

const fooRef = toRef(state, 'foo')

// toRef는 주로 props 객체에 있는 속성을 하나의 변수로 뽑아낼 떄 주로 사용된다
setup(props) {
	const fooRef = toRef(props, 'foo')
}

• toRef는 해당 객체가 존재하지 않아도, 사용 가능한 ref 객체를 Return한다. 따라서, 선택적 속성의 props인 경우에도 (Required : false or null 이 오는 경우) 활용 가능하다

toRefs

• reactive 객체를 plain object로 변환할 때 사용된다.

function useFeatureX() {
  const state = reactive({
    foo: 1,
    bar: 2
  })
  
  // const { foo } = state => 반응성 손실, 값 변경시 재렌더링 동작 안함
  
  return toRefs(state) // 반응성 유지
}

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

• toRefs 는 구성 요소가 반응성을 잃지 않고, 반환된 객체를 분해 / 확산할 수 있도록 컴포지션 함수에서 반응 객체를 반환할 때 유용하다.
• toRefs 는 reactive 객체에 포함된 속성에 대한 참조만 생성한다. 특정 속성에 대한 참조를 만드려면 toRef를 사용해야 함

isRef

• 값이 참조 객체인지 확인

customRef

• 종속성 추적, 업데이트 트리거를 명시적으로 제어하는 사용자 지정 참조를 만듦

<input v-model="text">

function useDebounceRef (value, delay = 200) {
  let timeout
  return customRef((track, trigger) => {
    return {
      get() {
        track() 
        return value
      },
      set(newValue) {
        cleartTimeout(timeout)
        timeout = setTimeOut(() => {
          value = newValue
          trigger()
        }, delay)
      }
    }
}
// 사용자 지정 참조를 사용하여 디바운스를 구현하는 예 (v-model)
                   
export default {
	setup() {
    	return {
          text: useDebounceRef('hello')
        }
  }
}

shallowRef

• 자신의 .value 변이를 추적하지만, 값을 반응적으로 만들지 않는 참조를 만듦

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)