한 번에 끝내는 프론트엔드 개발 초격차 패키지 Online를 들으며 정리한 내용입니다.

컴포지션API의 반응성

Vue.js 가이드문서에서 더 자세한 내용을 확인할 수 있습니다.

<template>
  <div @click="increase">
    {{ count }}
  </div>
</template>

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

현재 데이터를 변경하면 화면도 함께 바뀌는 반응성을 가지고 있는 코드가 작성되어 있습니다. 이 코드를 vue.js의 컴포지션API로 수정해보도록 하겠습니다.

1. 컴포지션 API과 반응성

<script>
export default {
  setup() {
    let count=0
    function increase() {
      count+=1
    }

    return {
      count,
      increase
    }
  }
}
</script>

setup이라는 메소드 내부에서 count라는 데이터를 정의를 했습니다. 하지만 이렇게 만들어진 데이터는 기본적으로 반응성이 없습니다.

2. 컴포지션 API의 반응성 추가

따라서 컴포지션 API를 활용때는 특정한 데이터를 만들어낼 때, 반응성이 가지도록 해주기 위해서 refs라는 기능을 활용합니다.

<script>
import {ref} from 'vue' //ref라는 기능을 vue패키지에서 가져옴

export default {
  setup() {
    let count= ref(0)     -----1) 
    function increase() {
      count.value+=1  ----2)
    }

    return {
      count,
      increase
    }
  }
}
</script>

1) setup메소드 내에 데이터라는 값을 할당할 때 ref라는 함수를 실행해 초기화할 그 값을 함수의 인수로 적어줍니다. 이렇게 하면 ref가 실행이 되며 반응성을 가지는 기본적인 vue.js의 객체데이터가 반환되게 됩니다.

2) 하지만 객체데이터가 반환되기 때문에 count를 하나의 데이터를 직접적으로 사용할 수는 없습니다. 따라서 데이터로 활용하기 위해서는 count.value를 통해 접근을 해야합니다.

이렇게 setup이라는 메소드 내부에서 반응성을 가지는 데이터가 반환이되면, 더이상 template부분에서 count.value 식으로 value라는 속성을 붙여주지 않아도 됩니다.