[Vue.js] 컴포지션 API

1. 컴포지션 API의 필요성

//App.vue
<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1>
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello world!',
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

message와 관련된 코드, 그리고 count와 관련된 코드가 나뉘어 작성을 하게 되며 코드가 동작하는 로직을 이해하기 위해서 관련 코드의 옵션 블록을 지속적으로 점프해야합니다.

코드를 이해하기 위해 관련 옵션들을 위, 아래로 이동(스크롤)하여 코드를 보는 행동을 점프라고 표현합니다. 논리적인 관점 단위로 개발을 하려고 해도 이 옵션의 규칙을 지켜야하고 더 많은 논리 주제가 추가될 수록 코드의 양이 많아져 가독성이 떨어지고 유지보수성이 낮아집니다.

그렇다면 동일한 논리적 관심사와 관련있는 코드를 함께 배치할 수 있다면 더 좋을 것입니다. 이것이 바로 Composition API가 할 수 있는 일입니다.

 

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

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

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

2.1 코드 예시

//App.vue
<h1 @click="increase">
  {{ count }}
</h1>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}

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

2.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라는 기능을 사용해야 합니다.

2.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
    }
  }
}