Vue3의 핵심: ref와 reactive의 차이와 공통점, 그리고 효과적인 활용법

Vue3는 성능 향상과 개발 편의성을 위해 반응형 시스템을 대폭 개선했습니다. 그 중심에는 ref와 reactive라는 두 가지 함수가 있습니다. 이 두 함수는 모두 데이터의 변화를 추적하고, 이에 따라 뷰를 자동으로 업데이트하는 역할을 수행하지만, 각각 다른 특징과 사용 용도를 가지고 있습니다. 본 글에서는 Vue3의 반응형 시스템에서 ref와 reactive의 차이점과 공통점을 깊이 있게 살펴보고, 각각의 장단점과 효과적인 활용 방법에 대해 자세히 알아보겠습니다.

 

728x90

ref와 reactive: 왜 두 가지가 필요할까?

Vue3는 데이터의 변화를 감지하고 뷰를 업데이트하는 반응형 시스템을 기반으로 합니다. 이때, 데이터의 종류에 따라 ref와 reactive를 적절히 사용해야 합니다. 왜 두 가지 함수가 필요할까요? 그 이유는 JavaScript의 데이터 타입이 원시 값(primitive)과 객체(object)로 나뉘기 때문입니다.

• 원시 값: 문자열, 숫자, 불리언 등 값 자체가 변하지 않는 데이터입니다.
• 객체: 여러 값을 하나의 단위로 묶은 복합적인 데이터입니다. (배열도 객체의 일종입니다.)

ref는 주로 원시 값을 감싸서 반응형으로 만들 때 사용하고, reactive는 객체나 배열과 같은 복합 데이터를 감싸서 반응형으로 만들 때 사용합니다.

ref와 reactive의 차이점

특징	ref	reactive
감싸는 데이터	원시 값, 객체, 배열	객체, 배열
반응형 만들기	.value 프로퍼티를 통해 접근	직접 접근 가능
깊은 반응성	객체 내부 값도 반응형	객체 내부 값도 반응형
TypeScript 지원	TS 타입 추론 지원	TS 타입 추론 지원

• ref:
  • 원시 값을 감싸서 반응형으로 만들 때 사용합니다.
  • 값에 접근할 때 .value 프로퍼티를 사용해야 합니다.
  • 객체를 감싸면 내부 값도 자동으로 반응형이 됩니다.
  • TypeScript와의 호환성이 좋습니다.
• reactive:
  • 객체나 배열을 감싸서 반응형으로 만들 때 사용합니다.
  • 값에 직접 접근할 수 있습니다.
  • 내부 값도 반응형이므로 객체 내부의 값이 변경될 때마다 뷰가 업데이트됩니다.
  • TypeScript와의 호환성이 좋습니다.

ref와 reactive의 공통점

• 반응형 시스템: 둘 다 데이터의 변화를 추적하고, 이에 따라 뷰를 자동으로 업데이트하는 역할을 합니다.
• Vue3 컴포넌트에서 사용: Vue3 컴포넌트 내에서 상태 관리를 위해 사용됩니다.
• TypeScript 지원: TypeScript와 함께 사용하여 타입 안전성을 높일 수 있습니다.

언제 어떤 것을 사용해야 할까?

• ref:
  • 단순한 값(숫자, 문자열, 불리언 등)을 관리할 때
  • 객체를 단일 값으로 취급하고 싶을 때
• reactive:
  • 객체나 배열과 같이 복잡한 데이터 구조를 관리할 때
  • 객체 내부의 여러 값이 연관되어 변경될 때

예시

728x90

 

 

import { ref, reactive } from 'vue';

const count = ref(0); // 원시 값 (숫자)을 감싸는 ref
const person = reactive({ name: 'John Doe', age: 30 }); // 객체를 감싸는 reactive

// 템플릿에서 사용
<template>
  <div>
    <p>Count: {{ count.value }}</p>
    <p>Name: {{ person.name }}, Age: {{ person.age }}</p>
  </div>
</template>

결론

ref와 reactive는 Vue3의 핵심적인 반응형 시스템을 구성하는 두 가지 함수입니다. 각각의 특징과 용도를 이해하고, 적절하게 사용하면 더욱 효율적이고 유연한 Vue 애플리케이션을 개발할 수 있습니다.