[Vue3] ref(), reactive()

• ref()
• reactive()
• 구조분해 desdtructuring

 

 

✅ ref() vs reactive() 차이

구분	ref()	reactive()
대상	기본형(숫자, 문자열 등) 또는 객체	객체만
값 접근	.value 필요 (기본형인 경우)	바로 접근 가능
구조 분해 (destructuring)	반응성 유지 안 됨	반응성 유지 안 됨
사용 예	간단한 상태값 (숫자, 문자열, boolean 등)	여러 속성을 가진 객체

 

 

 

- ref() 예제

 : 기본형 변수에 적합

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return { count, increment };
  }
}

 

 

• ref(0) → 내부적으로 value 속성에 값을 담음
• 화면에서 {{ count }}로 사용 가능 (템플릿에서는 .value 없이 접근 가능)
• 함수 내부에서는 count.value로 접근해야 함

 

 

---

 

 

 

- reactive() 예제

 : 객체 상태관리에 적합

 

import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      count: 0,
      name: '홍길동'
    });

    function increment() {
      state.count++;
    }

    return { state, increment };
  }
}

 

 

• reactive()는 객체 전체를 감싸 반응형으로 만듦
• state.count, state.name처럼 바로 접근 가능
• .value 필요 없음

 

또한 counter.counter 처럼 반응형 객체의 이름과 내부 변수 이름을 같은  이름으로 줘도 가능

<template>
  <button type="button" @click="setCount(7)"> Set 7 </button>
  <p>Counter is : {{ counter.counter }} </p>
</template>

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

// 반응형 객체
const counter = reactive({
  counter: 0
})

// 값 변경 함수
function setCount(val) {
  counter.counter = val   ✅ 올바른 접근
}
</script>

 

 

 

 

**

 

구조 분해(destructuring)하게 되면 reactive()  반응성이 깨질 수 있으므로 주의

const { count } = reactive({ count: 0 });

 

 

이런식으로 하면 count 는 반응형이 아니다.

 

구조분해 : 객체에서 값을 꺼내 변수에 바로 담는 문법으로 {}를 쓴다.

const person = {
  name: '철수',
  age: 20
};

// 구조 분해!
const { name, age } = person;

console.log(name); // 철수
console.log(age);  // 20

 

만약 아래처럼 쓰면 구조분해 아님. 그냥 state 객체를 count 변수에 넣은 것

const count = state;

import { reactive } from 'vue';

const state = reactive({ count: 0, name: 'a' });  // ← name='a'를 name: 'a'로 수정
const count = state;
console.log(state);

출력 : {count: 0,  name: "a"}