문몰래의 코딩일지

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  name: '홍길동',
})

// 구조 분해 할당 시 반응성을 유지하고 싶다면
const { count, name } = toRefs(state)

count.value++ // state.count가 함께 변경됨

vue3에서는 반응형 데이터를 다루는 것이 중요하다. 그렇다면 반응형 데이터라는 게 뭘까?

vue에서는 데이터가 바뀌면 가상 DOM에서 먼저 변화를 감지하고 필요한 부분만 실제 DOM으로

렌더링을 한다. 이 때 데이터가 바뀌는 것을 감지하는 것. 이 때 쓰는 것이 반응형 데이터 도구들이다

만약에 vue에서 <script></script> 안에서 let num = 1이라 선언하고 num = 2라고 해도 이게 화면에서 바뀌지 않는다. 왜냐하면 vue에서는 이게 바뀌었다고 랜더링을 해야한다는 걸 감지 하지 못하기 때문이다.

그때 사용하는 것이 바로 ref, reactive, toRefs같은 친구들이다.

Ref

• 단일 값(primitive or Object)을 반응형으로 감싸는 객체이다.
• .value 속성을 통해 실제 값을 접근하거나 변경한다.

import { ref } from 'vue'

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

Reactive

• 객체(혹은 배열)를 깊은 반응형 객체로 변환
• .value가 필요 없음.

import { reactive } from 'vue'

const state = reactive({
  count: 0,
  user: {
    name: '홍길동',
  },
})
state.count++

객체 / 배열을 깊게 추적해서 속성이 바뀌면 뷰가 자동 갱신된다.

toRefs

• reactive 객체를 속성 단위 ref로 변환
• 주로 reactive 객체를 구조 분해 할당하려 할 때 사용

import { reactive, toRefs } from 'vue'

const state = reactive({
  count: 0,
  name: '홍길동',
})

const { count } = state // ❌ 이렇게 하면 반응성 X

// 구조 분해 할당 시 반응성을 유지하고 싶다면
const { count, name } = toRefs(state)

reactive 객체를 분해하면 반응성이 깨짐.

toRefs를 쓰면 각각의 ref처럼 만들어준다.