Vue 3의 ref와 reactive: 깊이 있게 파헤치는 가이드 (예제와 함께)

Vue 3의 핵심 기능인 ref와 reactive는 데이터 반응성을 구현하는 데 필수적인 도구입니다. 두 개념은 비슷해 보이지만, 사용하는 상황과 데이터의 특성에 따라 적절하게 선택해야 합니다. 이 글에서는 ref와 reactive의 차이점을 명확히 하고, 다양한 예제를 통해 각각의 사용법을 상세히 설명하여 Vue 3 개발에 대한 이해를 높이는 것을 목표로 합니다.

ref는 단일 값에 대한 반응성 참조를 생성하는 함수입니다. 즉, 문자열, 숫자, boolean 등의 기본 타입이나 객체, 배열도 감싸서 반응성을 부여할 수 있습니다. ref로 감싼 값에 접근할 때는 .value 프로퍼티를 사용합니다.

import { ref } from 'vue';

const count = ref(0);

// 값 변경
count.value++;

reactive는 객체나 배열과 같은 복합 데이터를 반응성으로 만드는 함수입니다. ref와 달리, reactive로 감싼 객체의 모든 프로퍼티가 자동으로 반응성을 갖게 됩니다. 즉, 객체 내부의 값이 변경될 때마다 Vue 컴포넌트가 자동으로 업데이트됩니다.

import { reactive } from 'vue';

const person = reactive({
  name: '홍길동',
  age: 30
});

// 값 변경
person.age++;

ref와 reactive의 주요 차이점은 다음과 같습니다.

• 데이터 타입: ref는 모든 타입의 데이터를 감쌀 수 있지만, reactive는 객체나 배열과 같은 복합 데이터에 주로 사용됩니다.
• 반응성 범위: ref는 감싼 값 자체에 대한 반응성만 제공하지만, reactive는 객체 내부의 모든 프로퍼티에 대한 반응성을 제공합니다.
• 접근 방식: ref는 .value 프로퍼티를 통해 값에 접근하지만, reactive는 일반적인 객체 접근 방식으로 값에 접근합니다.

728x90

 

언제 ref를, 언제 reactive를 사용해야 할까요?

• 단일 값: 문자열, 숫자 등 단일 값을 반응성으로 만들고 싶을 때는 ref를 사용합니다.
• 복합 데이터: 객체나 배열과 같이 내부 프로퍼티가 여러 개인 복합 데이터를 반응성으로 만들고 싶을 때는 reactive를 사용합니다.
• 깊은 반응성: 객체 내부의 중첩된 객체까지 반응성을 유지하고 싶을 때는 reactive를 사용합니다.

예제를 통해 더 자세히 알아봅시다.

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <p>이름: {{ person.name }}, 나이: {{ person.age }}</p>
  </div>
</template>

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

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

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

위 예제에서 count는 ref로, person은 reactive로 선언되었습니다. 각각의 값이 변경될 때마다 템플릿이 자동으로 업데이트되는 것을 확인할 수 있습니다.

728x90

결론적으로, ref와 reactive는 Vue 3에서 데이터 반응성을 구현하는 데 필수적인 도구입니다. 각각의 특징을 이해하고 적절하게 사용한다면 더욱 효율적이고 유연한 Vue 애플리케이션을 개발할 수 있습니다.