컴포지션 API - 반응형 데이터

이번에는 Vue.js의 컴포지션 API의 반응형 데이터에 대해 알아봅시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

1. 반응형 데이터(반응성)

Vue.js의 중요한 개념인 반응성에 대해 살펴본 적이 있습니다. 이를 컴포지션 API로 코드를 수정하여 사용할 수 있으며 이에 대해 살펴봅시다.

1.1 코드 예시

App.vue

<h1 @click="increase">
  {{ count }}
</h1>

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}

위와 같이 클릭 이벤트를 통해 h1 요소를 클릭하면 0인 count가 1씩 증가하는 코드로 반응성이 적용되어 있습니다.

1.2 컴포지션 API 사용 예시(중간형)

App.vue

<h1 @click="increase">
  {{ count }}
</h1>

export default {
  setup() {
    let count = 0 // 
    function increase() {
      count += 1
    }

    return {
      count,
      increase
    }
  }
}

위 코드와 똑같이 구현을 했지만, 실제로 이벤트가 동작하지 않습니다. 그 이유는 데이터인 count가 반응성을 갖고 있지 않기 때문입니다.
이처럼 컴포지션 API를 활용할 때에는 특정한 데이터가 반응성을 가지도록 해줘야합니다.

그것을 가능하게 하는 것이 Vue에서 제공하는 ref라는 기능입니다.

1.3 컴포지션 API 사용 예시(완성형)

App.vue

<h1 @click="increase">
  {{ count }}
</h1>

import { ref } from 'vue' // vue 패키지에서 ref 기능 가져오기

export default {
  setup() {
    let count = ref(0) // ref 함수의 인수로 초기값 0 입력
    function increase() {
      count.value += 1 // count는 객체 데이터로 반환되므로 value 속성 명시
    }

    return {
      count,
      increase
    }
  }
}