Vue3 ref, reactive 사용법

ref

Vue.js 3에서 ref는 새로운 기능이 추가되어 이전 버전의 ref와는 조금 다릅니다. Vue.js 3에서 ref는 다음과 같은 기능을 가지고 있습니다.

1. 간편한 변수 선언
Vue.js 3에서 ref는 변수를 선언하는 데 사용될 수 있습니다. 다음은 ref를 사용하여 변수를 선언하는 예시입니다.

 

import { ref } from 'vue';

const count = ref(0);

 

 

2. 반응성 데이터 제공
Vue.js 3에서 ref는 변수를 반응성 데이터로 만들어줍니다. 따라서, ref로 선언된 변수의 값이 변경되면, 해당 값을 사용하는 Vue 컴포넌트의 뷰도 자동으로 업데이트됩니다.

 

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

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

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

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

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

 

 

3. ref 속성을 통한 변수 접근
Vue.js 3에서 ref는 변수에 접근하는 데 사용될 수 있는 value 속성을 가집니다. 이전 버전의 Vue에서는 ref 속성으로 변수에 접근하였지만, Vue.js 3에서는 value 속성을 통해 변수에 접근합니다.

 

import { ref } from 'vue';

const count = ref(0);

console.log(count.value); // 0

 

 

4. 컴포넌트 레퍼런스 제공
Vue.js 3에서 ref는 컴포넌트에 대한 레퍼런스를 제공할 수 있습니다. 다음은 ref를 사용하여 컴포넌트에 대한 레퍼런스를 제공하는 예시입니다.

 

<template>
  <div ref="myDiv">
    <p>Hello, World!</p>
  </div>
</template>

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

export default {
  setup() {
    const myDiv = ref(null);

    // myDiv.value는 <div> 엘리먼트의 레퍼런스를 가리킵니다.
    console.log(myDiv.value);

    return {
      myDiv,
    };
  },
};
</script>

 

Vue.js 3에서 ref는 위와 같이 매우 유용한 기능을 제공합니다. ref를 사용하여 간편하게 변수를 선언하고, 반응성 데이터를 제공하며, 컴포넌트에 대한 레퍼런스를 제공할 수 있습니다.

 

 

 

reactive

Vue 3에서 reactive는 Vue의 반응성(Reactivity) 시스템을 구현하는 데 사용되는 함수입니다. reactive 함수를 사용하여 객체를 반응성으로 만들 수 있습니다.

reactive 함수를 사용하면, 객체의 프로퍼티가 변경되면 Vue는 자동으로 해당 변경 사항을 감지하고 뷰를 업데이트합니다. 이전 버전의 Vue에서는 Vue.observable이라는 함수가 이러한 기능을 수행했지만, Vue 3에서는 reactive 함수로 대체되었습니다.

다음은 reactive 함수를 사용하여 객체를 반응성으로 만드는 예시입니다.

 

import { reactive } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello, World!',
});

console.log(state.count); // 0
console.log(state.message); // 'Hello, World!'

 

 

reactive 함수를 사용하면 객체를 반응성으로 만들 수 있으므로, 해당 객체의 프로퍼티가 변경될 때마다 Vue는 자동으로 해당 변경 사항을 감지하여 뷰를 업데이트합니다.

 

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const state = reactive({
      count: 0,
    });

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

    return {
      state,
      increment,
    };
  },
};
</script>

 

위의 코드에서 state.count 값이 변경될 때마다, Vue는 자동으로 해당 변경 사항을 감지하여 뷰를 업데이트합니다. reactive 함수는 Vue의 반응성 시스템을 사용하여 객체를 반응성으로 만들고, 해당 객체의 프로퍼티가 변경될 때마다 Vue가 자동으로 해당 변경 사항을 감지하여 뷰를 업데이트합니다.