[VUE] Composition API - toRef, toRefs

reactive로 만든 객체는 반응형이지만 개별 속성을 구조 분해 할당하면 반응형을 잃어버릴 수 있습니다.
이를 방지하기 위해 toRef와 toRefs를 사용하여 개별 속성을 ref로 변환할 수 있습니다.

 

📌toRef 사용 방법

toRef는 reactive 객체의 특정 속성을 ref로 변환합니다.
이렇게 하면 .value 없이 reactive 객체처럼 사용할 수 있습니다.

<template>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
</template>

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

    const state = reactive({ 
        count : 0,
        name : 'John'
    });
    
    // state.count를 개별 ref로 변환
    const count = toRef(state, 'count');

    const increment = () => {
        count.value++; // toRef를 사용했으므로 ref처럼 .value를 사용할 수 있음
    }
</script>

 

 

✅ toRef가 사용 이유

• reactive 객체의 속성을 직접 구조 분해 하면 반응형이 사라짐
• toRef를 사용하면 해당 속성을 ref로 유지할 수 있음

<template>
    <p>count : {{ count }}</p>
    <button @click="increment">증가</button>
</template>

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

    const state = reactive({ 
        count : 0
    });
    
    const count = state.count; // 반응형이 깨짐 (count는 그냥 숫자가 됨)

    const increment = () => {
        count.value++; // count의 속성이 number가 되어 .value를 사용할 수 없음
    }
</script>

 

 

 

 

📌toRefs 사용 방법

toRefs는 reactive 객체의 모든 속성을 ref로 변환합니다.
toRef를 여러 번 사용할 필요 없이 한 번에 변환할 수 있습니다.

<template>
    <p>이름 : {{ name }}</p>
    <p>나이 : {{ age }}</p>
    <button @click="updateAge">나이 변경</button>
</template>

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

    const state = reactive({ 
        name : "John",
        age : 35
    });
    
    // state의 모든 속성을 ref로 변환
    const { name, age } = toRefs(state);

    const updateAge = () => {
        age.value = 17; // age가 toRefs로 인해 ref로 변환되어 .value 사용 가능
    }
</script>

 

 

✅ toRefs가 사용 이유

• reactive 객체의 속성을 직접 구조 분해 하면 반응형이 사라짐
• toRef를 사용하면 모든 속성을 ref로 유지할 수 있음

 

 

 

📌toRef, toRefs 차이점

속성	toRef	toRefs
변환 대상	특정 속성	모든 속성
반환 타입	ref (단일 값)	{ [key]: ref } (객체)
사용 사례	특정 속성만 ref로 변환할 때	reactive 객체 전체 속성을 ref로 변환할 때