Vue3 반응형 상태 ref, reactive 이란? 어떤 것을 사용해야할까?

Vue2 에서는 data 옵션을 이용해서 데이터 바인딩을 하였습니다.

export default {
  data() {
    return {
      name: '파워쿠의 블로그',
      address: 'https://powerku.tistory.com/'
    }
  }
}

Vue3 에서 Composition API 개념이 추가하면서 ref, reactive라는 개념이 추가 되었습니다.

ref 란?

ref는 반응형 값을 생성해서, 값이 업데이트가 되면 Vue에서 반응을 해서 DOM을 업데이트 합니다.

값은 문자, 숫자, 불리언, 객체 등 어떠한 값도 다 넣을 수 있습니다.

값을 변경하기 위해서는 .value를 이용해서 변경합니다.

template에서는 .value 없이 사용할 수 있습니다.

const name = ref('superman')

 setTimeout(() => {
   name.value = 'batman'
 }, 2000)

reactive는 ref와 비슷하지만 객체 만 선언할 수 있습니다.

reactive를 이용해서 전달한 객체를 프록시로 감싸서 반응형 객체로 만듭니다.

객체의 값을 변경하기 위해서 .value를 사용하지 않아도 됩니다.

 const state = reactive({
   count: 0
 })

 setInterval(() => {
   state.count++;
 }, 1000)

하지만 reactive의 한계점이 있습니다.

이러한 한계점 때문에 반응 상태를 선언하기 위해서 Vue 공식 문서에서는 ref() 를 추천합니다.

728x90