[Vue3] ref, reactive

ref

ref는 Vue 3의 Composition API에서 제공되는 함수 중 하나로, 반응성(Reactivity)을 적용할 수 있는 변수를 생성합니다.

ref 함수를 사용하여 생성된 변수는 값이 변경될 때마다 자동으로 해당 값을 참조하는 컴포넌트를 다시 렌더링하도록 만들어줍니다. 이를 통해 컴포넌트 내부의 데이터가 변경될 때마다 뷰(View)도 자동으로 업데이트되게 됩니다.

ref 함수를 사용하여 변수를 생성하면, 해당 변수는 객체로 감싸지게 됩니다. 이는 Vue 3의 반응성 시스템이 객체의 프로퍼티 변경을 추적하기 위함입니다. 따라서 ref 함수를 사용하여 생성된 변수를 읽을 때에는 .value를 사용하여 내부의 값에 접근해야 합니다.

 

ref 함수는setup 함수에서만 사용할 수 있습니다. 따라서 ref 함수를 methods 옵션에서 사용하는 것은 불가능합니다.

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increaseCount">Increase</button>
  </div>
</template>

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

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

    const increaseCount = () => {
      count.value++;
    };

    return {
      count,
      increaseCount,
    };
  },
};
</script>

여기서 count 변수가 ref함수를 이용하여 정의되었기 때문에 count값이 바뀌면 템플릿에서도 count가 바뀝니다.

만약 count가 일반 함수로 정의되었다면 변수의 값이 변경되어도 template에서 적용되지 않습니다.

 

reactive

reactive는 Vue 3에서 제공하는 함수로, ref와 마찬가지로 객체를 반응형으로 만들어줍니다.

ref는 일반자료형일 경우에 사용하고 reactive는 객체나 배열을 변수로 정의할 때 사용합니다.

 

reactive 함수를 사용하면 객체를 감싸는 Proxy 객체가 생성됩니다. 이 Proxy 객체는 객체의 프로퍼티에 접근할 때마다 getter와 setter 함수를 실행하여 객체를 반응형으로 만듭니다.

 

reactive로 만든 객체의 프로퍼티에 접근할 때는 그냥 일반 객체처럼 접근하면 됩니다.

<template>
  <div>
    <p>Name: {{ person.name }}</p>
    <p>Age: {{ person.age }}</p>
    <button @click="increaseAge">Increase Age</button>
  </div>
</template>

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

export default {
  setup() {
    const person = reactive({
      name: 'John',
      age: 30,
    });

    const increaseAge = () => {
      person.age++;
    };

    return {
      person,
      increaseAge,
    };
  },
};
</script>