Vue 3 ) Vue3 에서 제공하는 반응성과 관련된 APIs

반응성 관련 API

Vue 3 는 프록시를 이용해 반응성을 관리합니다. 어떤 변수가 반응성을 가지게 하기 위해서는 프록시로의 변환이 필요하고, 반응성을 해제하기 위해서는 프록시에서 일반 변수로의 변환이 필요합니다.

reactive	객체의 속성들이 반응성을 갖게 만들어줍니다. 일반적으로 기본 자료형 변수가 반응성을 갖도록 할 때 ref 함수를 이용하는데, 객체의 속성으로 변수들을 모아 reactive 를 사용하면 변수의 개수가 많을 때 매우 유리하게 사용할 수 있습니다.
readonly	일반 객체나 프록시 객체를 읽기전용 프록시로 변경합니다. 기본적으로 객체 내 모든 속성을 읽기전용으로 변경합니다.
isProxy	인자로 들어온 변수가 reactive 나 readonly 등으로 만들어진 프록시 객체인지 확인해줍니다.
isReactive	reactive 로 생성된 프록시 객체인지 확인해줍니다. reactive 의 반환 프록시 객체를 다시 readonly 로 반환한 프록시 객체에도 true 값을 반환하게 됩니다.
isReadonly	readonly 로 생성된 프록시 객체인지 확인해줍니다.
toRaw	reactive 와 readonly 로 만들어진 프록시 객체를 원래 객체로 복구시킵니다.
markRaw	markRaw 로 생성된 객체는 reactive 나 readonly 를 통해서 프록시 객체로 생성되지 않습니다.
swallowReactive	참조되는 객체의 직계 속성에만 reactive 를 부여하고 내부에 중첩된 객체에는 reactive 를 부여하지 않습니다.
shallowReadonly	shallowReactive 와 마찬가지로 직계 속성만 readonly 처리를 해줍니다.

더 자세히

reactive

• 객체의 반응형 복사본을 반환합니다.

const ojb = reactive({ count: 0})

반응형 변화는 'deep' 하게 적용되어 모든 중첩된 속성의 변화를 감지합니다.

readonly

• 객체 ( 반응형 또는 일반객체 ) 또는 ref 를 가져와서 원본에 대한 읽기전용 프록시를 반환합니다. 읽기전용 프록시는 'deep' 하게 적용되어 모든 중첩된 속성도 읽기전용으로 접근하게 됩니다.

const original = reactive({ count: 0 })
const copy = readonly(original)

watchEffect(() => {
  // 반응성 추적을 위해 작성
  console.log(copy.count)
})

// 원본을 변경하면 복사본에 의존하는 감시자가 트리거됩니다.
original.count++

// 복사본은 변경이 되지 않고, 경고가 발생합니다
copy.count++ // 경고!

isProxy

• 객체가 반응형 (reactive) 또는 읽기전용 (readonly) 으로 생성된 프록시인지 확인합니다.

isReactive

• 객체가 반응형 (reactive) 으로 생성된 프록시인지 확인합니다.

import { reactive, isReactive } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'JongIk'
    })
    console.log(isReactive(state)) // -> true
  }
}

• 프록시가 읽기전용 (readonly) 로 생성되었지만, 반응형 (reactive) 으로 생성된 다른 프록시를 감싸는 경우에도 true 를 반환합니다.

아래 코드에서 state 객체를 이용하여 name 속성을 조작하면, stateCopy 객체의 값도 조작이 됩니다. stateCopy 객체로 name 속성 조작은 불가능합니다.

import { reactive, isReactive, readonly } from 'vue'
export default {
  setup() {
    const state = reactive({
      name: 'JongIk'
    })

    // 일반 객체에서 생성된 읽기전용 프록시
    const plain = readonly({
      name: 'JongIk2'
    })
    console.log(isReactive(plain)) // -> false

    // 반응형 프록시에서 생성된 읽기전용 프록시
    const stateCopy = readonly(state)
    console.log(isReactive(stateCopy)) // -> true
  }
}

isReadonly

• 객체가 읽기전용(readonly) 으로 생성된 프록시인지 확인합니다.

toRaw

반응형 (reactive) 또는 읽기전용 (readonly) 프록시의 원시 원본 객체를 반환합니다. 프록시 접근/추적 오버헤드 없이 일시적으로 읽거나, 변경을 트리거하지 않고 쓸 수 있는 도피 수단 (escape hatch) 입니다.
원래 객체에 대한 영구 참조를 유지하는 것은 권장되지 않습니다.

const foo = {}
const reactiveFoo = reactive(foo)

console.log(toRaw(reactiveFoo) === foo) // true

markRaw

• 객체가 프록시로 변환되지 않도록 객체를 표시합니다. 객체 자체를 반환합니다.

const foo = markRaw({})
console.log(isReactive(reactive(foo))) // false

// 다른 반응형 객체 안에 중첩될 때도 작동합니다
const bar = reactive({ foo })
console.log(isReactive(bar.foo)) // false

shallowReactive

• 고유한 속성의 반응성을 추적하지만 중첩된 객체의 깊은 반응 변환을 수행하지 않는 반응 프록시를 생성합니다. (원시 값 노출)

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 변경 상태의 자체적인 속성은 반응적입니다
state.foo++
// 하지만 중첩된 객체는 변환하지 않습니다.
isReactive(state.nested) // false
state.nested.bar++ // 무반응

shallowReadonly

• 고유한 속성을 읽기전용으로 만들지만 중첩된 객체의 깊은 읽기전용 변환을 수행하지 않는 프록시를 생성합니다. (원시 값 노출)

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})

// 변경 상태의 자체적인 속성 변경이 안됩니다
state.foo++
// 하지만 중첩된 객체에서 작동합니다
isReadonly(state.nested) // false
state.nested.bar++ // 반응