Vue3의 반응형 데이터(Reactivity) | 반응형 데이터의 구조분해와 변경방지

반응형 기초

💥 반응형 상태 선언하기

1. reactive()

자바스크립트 객체에서 반응형 상태를 생성하려면 reactive() 함수를 사용한다.

import { reactive } from 'vue'
const tay = reactive({ level: 0 })

객체, 배열 같은 레퍼런스 타입도 반응형 객체로 만들 수 있다.

const tay = reactive({level:0, dev: { count: 0, } })

    

이러한 reactive()는 뎁스가 깊어도 잘 동작한다.

즉, 위 코드에서 reactive로 tay.dev.count에도 반응한다.

참고로 Options API의 data에서 객체를 반환할 때, 내부적으로 reactive()에 의해 만들어진다.

 

 

2. ref()

number, string, boolean 등 기본타입(프리미티브 타입)에 반응형 데이터를 만들 때 ref() 함수를 사용한다.

import { ref } from 'vue';
const lev = ref(0);

 

ref 메서드는 변이가능한 객체를 반환한다.

const message = ref('안녕')
console.log(message.value) // '안녕'

 

객체 안에는 value라는 하나의 속성만을 포함한다.

해당 value의 값은 ref() 메서드의 매개변수를 통해 받은 값을 갖는다.

즉, 반응형 객체는 value 값에 참조역할(reference)만 하기 때문에 ref 다.

 

 

템플릿에서 사용할 때는 자동으로 내부값(value)를 풀어내기(언래핑) 때문에 .value가 필요없다.

{{ message }}

 

 

이러한 언래핑은 반응형 객체와 달리 반응형 배열, 기본 컬렉션 타입의 요소로 접근될 때는 언래핑이 없다.

const tay = reactive([ref('테이 문자열')]);
console.log(tay[0].value);

 

 

💥 반응형 상태 구조 분해

const tay = reactive({
    name: '테이',
    blog: 'taylog',
})
let { name, blog } = book

 

반응형 객체의 몇몇 속성만 사용하길 원해서 구조분해할당을 하게되면 반응형을 잃게 된다.

예를들어 setup에서 반환할때 구조분해할당을 하면 반응형을 잃는다.

 

이럴때 toRefs, toRef를 사용하면 동기화되어 반응형 연결을 유지한다.

const tay = reactive({
    name: '테이',
    blog: 'taylog',
})

let { name, blog } = toRefs(tay)
blog.value = '테이로그' // blog가 ref 이므로 .value 를 사용해야한다.
console.log(tay.blog) //'테이로그'

 

 

💥 반응형 객체의 변경 방지 (readonly)

readonly를 이용하여 반응형 객체의 변경 방지할 수 있다.

반응형 객체의 변화를 추적하길 원하지만, 특정 부분에서의 변화를 막기를 원할 경우 읽기 전용 프록시를 생성한다.

const original = reactive({count: 0})
const copy = readonly(original)
original.count++ // => original과 copy 모두 반응한다.
// copy.count++ => 에러