Vue Composition API 반응형 유틸리티 함수 (toRef, toRefs) 정리

Vue Composition api의 반응형 유틸리티 함수 (toRef, toRefs)

😚toRef()

- 반응형 객체의 속성을 하나의 ref 객체로 만들 때 사용한다.

즉, 반응형을 잃지 않은채로 뽑을 때 사용하는 api

- 생성된 ref 객체는 원본 반응형 객체의 속성과 동기화된다!

 

toRef 사용 방법

(1) 반응형 객체 생성

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

 

(2) ref로 추출

const fooRef = toRef(state, 'foo')

 

 

(3) 참조를 변경하면 원본이 업데이트된다

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

 

(4) 원본을 변경하면 ref도 업데이트된다

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

 

※ 주의! ref와 toRef는 다르다.

const fooRef = ref(state.foo)

→ 동기화되지 않는다.

 

 

toRef의 활용

- toRef()는 composable 함수에 props 참조를 전달할 때 유용하다.

 

(1) props 정의

const props = defineProps(/* ... */)

 

 

(2) props의 foo를 ref로 변환한 다음 사용한다.

useSomeFeature(toRef(props, 'foo'))

- toRef()가 props와 함께 사용되면 props 변경에 대한 제한사항도 적용된다.

- ref에 새 값을 할당하려는 시도는 prop를 직접 수정하려는 것과 동일하게 판단되며 허용되지 않는다.(에러!)

- 새 값을 할당하려면 toRef()대신에 computed()를 활용하자

- 그리고 toRef는 반응형 객체의 속성이 존재하지 않아도 사용가능한 ref 객체를 반환한다.

 

 

😚toRefs

- 반응형 객체를 구조분해 할당 후 반응형을 그대로 유지하고 싶을 때 사용한다.

- 즉, 반응형을 잃지 않은채로 뽑을 때 사용하는 api

 

 

toRefs의 필요성

- 반응형 객체를 구조분해하여 재할당할 경우 원래는 반응형으로 동작하지 않는다.

(1) 반응형 객체 생성

let position = reactive({
    x: 0,
    y: 0,
});

 

(2) 구조분해할당

let { x, y } = position;

 

(3) 참조 데이터 수정

x++;
y++;

 

(4) 원본과 동기화되지 않는다.

console.log(x, y);                   // 1 1
console.log(position.x, position.y); // 0 0

→ 구조분해할당 후에도 반응형을 유지하고 싶다면 toRefs 를 사용하자!

 

 

toRefs 사용 방법

(1) 반응형 객체 생성

let position = reactive({
    x: 0,
    y: 0,
});

 

(2) toRefs로 구조분해할당

let { x, y } = toRefs(position);

 

(3) 참조 데이터 수정

x.value++;
y.value++;

 

(4) 원본과 동기화 된다!

console.log(x.value, y.value);       // 1 1
console.log(position.x, position.y); // 1 1

- toRefs를 사용하면 reactive 객체 각각의 속성이 ref 값으로 변환된다.

 

 

toRefs 활용

function useFeatureX() {

    (1) 반응형 객체 생성
    const state = reactive({
        foo: 1,
        bar: 2
    })
    
    // (어쩌구 로직)
    
    (2) 반환할땐 ref로 반환
    return toRefs(state)
}

(3) 구조분해할당으로 반응형이 유지된채 사용가능
const { foo, bar } = useFeatureX()

- toRefs() 는 일반 함수나 composable 함수에서 reactive 객체를 반환받는 경우에 유용하다.

 

 

😚그 외 유틸리티 함수

isRef()

- 값이 ref 객체인지 확인한다.

 

unref()

- 인자가 ref면 내부 값을 반환하고, 그렇지 않으면 인자 자체를 반환한다.

즉, 반응형이면 반응형을 풀고 값만 반환한다.