[VUE] Composition API - ref, reactive

Composition API에서 ref와 reactive는 반응형 상태를 만들기 위해 사용됩니다. 두 속성은 동작 방식과 사용법에 차이가 있습니다.

 

📌ref (단일 값 또는 객체를 감싸는 반응형 래퍼)

ref는 기본 자료형(number, string, boolean 등) 또는 객체를 감싸서 반응형으로 만듭니다.

 

✅ ref 예제 (기본 자료형)

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

<script setup>
    import { ref } from 'vue';

    const count = ref(0); // 숫자형 타입

    // 값 증가
    const increment = () => {
        count.value++; // .value를 사용해야 함
    }
</script>

 

 

✅ ref 예제 (객체)

<template>
    <div>
        <p>나이 : {{ user.age }}</p>
        <button @click="updateAge">나이 변경</button>
    </div>
</template>

<script setup>
    import { ref } from 'vue';

    const user = ref({
        name : 'james',
        age : 15
    })

    // 나이 변경
    const updateAge = () => {
        user.value.age = 29; // 객체 안의 속성도 반응형
    }
</script>

 

 

✅ ref 특징

• .value를 사용해야 값에 접근 가능
• 객체를 감쌀 수도 있지만, reactive보다 덜 직관적일 수 있음

 

 

 

📌reactive (객체나 배열의 반응형 상태)

reactive는 객체와 배열을 반응형으로 만듭니다. 기본 타입(number, string, boolean 등)은 reactive로 만들 수 없습니다.

 

✅ reactive 예제 (객체)

<template>
    <div>
        <p>나이 : {{ user.age }}</p>
        <button @click="updateAge">나이 변경</button>
    </div>
</template>

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

    const user = reactive({
        name : 'James',
        age : 15
    })

    // 값 변경
    const updateAge = () => {
        user.age = 29;    // .value 필요 없음
    }
</script>

 

✅ reactive 예제 (배열)

<template>
    <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
    </ul>
    <button @click="addItem">추가</button>
</template>

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

    const items = reactive(["James", "Bob"]);

    // 값 추가
    const addItem = () => {
        items.push("Emma"); // 반응형
    }
</script>

 

✅ reactive 특징

• .value를 사용하지 않고 직접 속성에 접근 가능
• 객체/배열의 속성 변경도 자동 반응형
• 기본 자료형(number, string, boolean 등)에는 사용할 수 없음

 

 

📌ref, reactive 주요 차이점

비교 항목	ref	reactive
데이터 유형	기본형(number, string, boolean 등) & 객체 가능	객체, 배열 (배열도 객체로 취급)
반응형 구조	.value 사용 필요	.value 없이 직접 접근 가능
배열 지원	가능 (ref([]))	가능 (reactive([]))
비구조화 할당	안됨 (const { count } = state는 반응형을 잃음)	안됨 (객체의 속성을 직접 구조 분해하면 반응형을 잃음)
주요 사용 사례	단일 값, 원시 타입, 간단한 상태 관리	복잡한 객체나 배열의 반응형 관리

 

 

📌ref vs reactive 선택 기준

✅ ref 선택

• number, string, boolean 과 같은 기본형 데이터를 다룰 때
• 반응형 객체라도 .value 사용이 불편하지 않을 때
• 단순한 상태 저장 (ref(0), ref('hello') 등)

✅ reactive 선택

• 객체 또는 배열을 다룰 때
• .value 없이 직관적으로 속성 변경을 원할 때
• 복잡한 상태 관리가 필요한 경우

 

 

📌결론

• 기본 데이터(number, string, boolean 등)는 ref 사용합니다.
• 객체/배열은 reactive를 사용하면 .value 없이 접근 가능합니다.