vue3 ref()?

ref는 Vue 3에서 반응형 데이터 객체를 생성하는 데 사용되는 함수

ref는 Vue 3에서 반응형 데이터를 쉽게 다루기 위한 강력한 도구

ref 함수는 기본 데이터 유형(숫자, 문자열, 불리언 등)을 감싸고, 이를 반응형 객체로 만듭니다. 이렇게 생성된 객체는 .value 프로퍼티를 통해 실제 값에 접근할 수 있습니다.

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

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

// 반응형 상태 생성
const count = ref(0);//count.value로 접근가능

// 함수 정의
function increment() {
  count.value++;
}
</script>

<template>
  <div>{{ user.name }}</div>
  <button @click="updateName">Update Name</button>
</template>

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

// 반응형 객체 생성 
const user = ref({//user.value.name 으로 접근 가능
  name: 'John Doe'
});

// 함수 정의
function updateName() {
  user.value.name = 'Jane Doe';
}
</script>

ref의 주요 특징

1. 반응형 데이터: ref로 생성된 데이터는 Vue의 반응형 시스템에 의해 추적되며, 값이 변경되면 관련된 컴포넌트가 자동으로 다시 렌더링됩니다.
2. 단순 데이터 타입: ref는 숫자, 문자열, 불리언 등 단순 데이터 타입을 반응형으로 만들 때 주로 사용됩니다.
3. 객체와 배열: ref는 객체와 배열을 반응형으로 만들 때도 사용될 수 있지만, 복잡한 구조의 경우 reactive를 사용하는 것이 더 적합할 수 있습니다.

ref vs reactive

• ref: 단일 값 또는 단순한 데이터 타입을 반응형으로 만들 때 사용됩니다. value 프로퍼티를 통해 접근합니다.
• reactive: 객체 전체를 반응형으로 만들 때 사용됩니다. 중첩된 구조도 반응형으로 처리합니다.