[Vue.js] Vue3 ref, reactive 사용

ref

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

1. 간편한 변수 선언
Vue.js 3에서 ref는 변수를 선언하는 데 사용될 수 있다. ref 변수 선언시 List, Object, String 등 여러 element 타입으로 선언을 할 수 있다.

 

const { createApp, onMounted, onBeforeMount, ref, watch, watchEffect, computed } = Vue;
    
const count = ref(0);
const tasks = ref(
  JSON.parse(
    localStorage.getItem('tasks') ?? '[]'
  )
);
const message = ref('Hello');

 

 

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

 

tasks로 ref 를 만들고 이를 참조하는 filteredTasks가 tasks의 변경이 감지되면 재계산  된다. Vue 컴포넌트 단에서는 filteredTasks로 화면을 그리므로 변경이 감지될 때 마다 새로 렌더링 하게 된다.

<!-- This is a list of tasks -->
<div v-for="(task, index) in filteredTasks" :key="task.id"
    :class="{'task': true, completed: task.done, [task.priority.toLowerCase()]: true}">
    <div>
      <!-- Is task done? -->
      <input type="checkbox" v-model="task.done">
      <!-- Task description -->
      <span>{{task.description}}</span>
    </div>
    <!-- Removing a task -->
    <button class="remove-button" @click="removeTask(index)">✖</button>
</div>

<script>
    const { createApp, onMounted, onBeforeMount, ref, watch, watchEffect, computed } = Vue;

    const App = {
      setup() {
        const tasks = ref(
          JSON.parse(
            localStorage.getItem('tasks') ?? '[]'
          )
        );
        const filteredTasks = computed(
          () => tasks.value.filter(
            task => task.description.toLowerCase()
              .includes(filterText.value.toLowerCase())
          )
        );

 

 

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>

 

 

 

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가 자동으로 해당 변경 사항을 감지하여 뷰를 업데이트한다.