[Vue3] 반응형 데이터 기초

반응형 상태 선언하기

JavaScript 객체에서 반응형 상태를 생성하기 위해서는 reactive() 함수를 사용할 수 있습니다.

import { reactive } from 'vue'

// 반응형 상태
const state = reactive({ count: 0 })

컴포넌트 <template setup>에서 반응형 객체를 사용하는 예제입니다.

<script setup>
import { reactive } from 'vue'

const state = reactive({ count: 0 })
</script>

<template>
  <div>{{ state.count }}</div>
</template>

ref로 원시값 반응형 데이터 생성하기

reactive() 함수는 객체타입에만 동작합니다. 그래서 기본타입(number, string, boolean)을 반응형으로 만들고자 할 때 ref 메소드를 사용할 수 있습니다.

import { ref } from 'vue'

const count = ref(0)

ref 메서드는 변이가능한(mutable) 객체를 반환합니다. 이 객체 안에는 value라는 하나의 속성만 포함하는데요. value값은 ref() 메서드에서 매개변수로 받은 값을 갖고 있습니다. 이 객체는 내부의 value 값에 대한 반응형 참조(reference) 역할을 합니다.

import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

템플릿에서 사용

템플릿에서 사용할 때는 자동으로 내부 값(value)을 풀어내기(Unwarpping) 때문에 .value를 추가할 필요없이 사용할 수 있습니다.

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

const count = ref(0)
</script>

<template>
  <div>{{ count }}</div>
</template>

반응형 객체의 ref Unwarpping

ref가 반응형 객체의 속성으로 접근할 때, 자동적으로 내부 값으로 벗겨내서, 일반적인 속성과 마찬가지로 동작합니다. 이때 반응형은 연결되어 있습니다.

const count = ref(0)
const state = reactive({
  count
})
count.value++
console.log(count.value) // 1
console.log(state.count) // 1

배열 및 컬렉션의 참조 Unwarpping

반응형 객체와 달리 ref가 반응형 배열 또는 Map과 같은 기본 컬렉션 타입의 요소로 접근될 때 수행되는 래핑 해제가 없습니다.

const books = reactive([ref('Vue 3 Guide')])
// need .value here
console.log(books[0].value)

const map = reactive(new Map([['count', ref(0)]]))
// need .value here
console.log(map.get('count').value)

반응형 상태 구조 분해하기(Destructuring)

큰 반응형 객체의 몇몇 속성을 사용하길 원할 때, 원하는 속성을 얻기 위해 ES6 구조 분해 할당을 사용하는 것은 매우 일반적입니다.

import { reactive } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: '당신은 이 책을 지금 바로 읽습니다 ;)',
  price: '무료'
})

let { author, title } = book

안타깝게도, 구조 분해로 두 속성은 반응형을 잃게 됩니다. 이 경우, 반응형 객체를 일련의 ref 들로 변환해야 합니다. ref 들은 소스 객체에 대한 반응형 연결을 유지합니다.

toRefs, toRef를 사용하면 반응형 객체의 속성과 동기화 됩니다. 그래서 원본 속성을 변경하면 ref 객체가 업데이트되고 그 반대의 경우도 마찬가지 입니다.

import { reactive, toRefs } from 'vue'

const book = reactive({
  author: 'Vue Team',
  year: '2020',
  title: 'Vue 3 Guide',
  description: '당신은 지금 바로 이 책을 읽습니다  ;)',
  price: '무료'
})

let { author, title } = toRefs(book)

title.value = 'Vue 3 상세 Guide' // title 이 ref 이므로 .value 를 사용해야 합니다.
console.log(book.title) // 'Vue 3 Detailed Guide'

readonly를 이용하여 반응형 객체의 변경 방지

때때로 반응형 객체(ref나 reactive)의 변화를 추적하기 원하지만, 또한 특정 부분에서는 변화를 막기를 원하기도 합니다. 예를 들어, Provide/Inject로 주입된 반응형 객체를 갖고 있을 때, 우리는 그것이 주입된 곳에서는 해당 객체가 변이되는 걸 막고자 할 것입니다. 이렇게 하려면 원래 객체에 대한 읽기 전용 프록시를 생성해야 합니다.

import { reactive, readonly } from 'vue'

const original = reactive({ count: 0 })

const copy = readonly(original)

// 원본이 변이되면 복사본에 의존하는 watch 도 트리거될 것 입니다.
original.count++

// 복사본을 변이하려고 하면 경고와 함께 실패할 것 입니다.
copy.count++ // warning: "Set operation on key 'count' failed: target is readonly."