[Vue.js] Vue3에서 ref와 reactive 사용법과 차이점

Yeonsu Summer·2022년 9월 19일

개념정리

Vue.js

목록 보기

3/6

Vue3에서는 Composition API를 새롭게 등장시켰습니다. 기존의 인스턴스 옵션 단위가 아닌, 특정 기능이나 논리의 단위로 여러 컴포넌트에서 재사용할 수 있도록 하였습니다.

이 중 ref와 reactive를 활용하면 컴포넌트와 별개로 사용할 수 있는 반응형 데이터를 생성할 수 있습니다.

버튼을 클릭하면 값이 변경되는 예제로 살펴봅시다.

- ref

<template>
  <div>
    <div class="name">{{ name }}</div>
    <button @click="updateName">Click</button>
  </div>
</template>

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

export default {
  setup() {
    const name = ref("Summer");

    const updateName = () => {
      name.value = "Yeonsu";
    };
    return {
      name,
      updateName,
    };
  },
};
</script>

새롭게 정의된 ref

Vue3 이전에는 뷰 템플릿의 DOM 또는 컴포넌트를 가리키는 속성이었지만, Vue3에서는 reactive reference를 의미합니다.

ref 사용하는 방법

<script>에 import { ref } from "vue";을 임포트합니다.

변수를 선언하고 값을 ref()로 감싸줍니다.

변수 값을 변경할 때 변수.value에 변경할 값을 넣어줍니다.

- reactive

<template>
  <div>
    <div class="name">{{ name }}</div>
    <button @click="updateName">Click</button>
  </div>
</template>

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

export default {
  setup() {
    const name = reactive({
    	id: 1,
    });

    const updateName = () => {
      name.id = 2;
    };
    return {
      name,
      updateName,
    };
  },
};
</script>

reactive 사용하는 방법

<script>에 import { reactive } from "vue";을 임포트합니다.

변수를 선언하고 값을 reactive()로 감싸줍니다.

property 값을 변경할 때 변수.property에 변경할 값을 넣어줍니다.

주의할 점

reactive는 object, array 이외에는 사용할 수 없습니다.

- ref와 reactive의 차이점

타입 제한
ref에서는 String, Number, Object 등 어떠한 타입에서도 사용할 수 있습니다.
반면 reactive에서는 Object, array, Map, Set과 같은 타입에서만 사용할 수 있습니다.
접근 방식
ref에서는 .value property를 붙여 접근할 수 있습니다. <templete>에서 변수를 명시할 때에는 붙일 필요가 없습니다.
reactive에서는 .value를 붙일 필요가 없이 <templete>에서 사용하는 자바스크립트 문법처럼 사용하시면 됩니다.