Vue 3 Composition API의 ref함수

Vue 3 Composition API의 ref함수의 정의(타입스크립트) 해석

ref()함수의 정의는 아래와 같다

function ref<T>(value: T): Ref<UnwrapRef<T>>

interface Ref<T> {
  value: T
}

해석하자면 아래와 같은 예제가 있을때 다음의 내용을 확인할수있다

const val = ref<1 | 2 | 3>(1);

1.val이라는 함수는 vue3의 Ref객체를 가진다

2.ref<T>(T):Ref<T> 를 보면 알수있듯이 T에 인자를 넣으면 해당 인자를 Vue3의 Ref객체(반응적인 상태를 유지하는 변수)로 반환받게 된다

3.<T>에는 Union타입을 추가해서 사용할수있다

4. ref<유니온타입&일반타입>(초기값) : 반환값은 해당 초기값을 가진 ref객체

5.ref객체에서 데이터를 꺼낼땐 ref객체명.value를 사용한다