컴포지션 API

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

1. 개요

1.1 코드 예시

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>

1.2 컴포지션 API의 필요성

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

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

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

1.3 컴포지션 API 사용 예시

1.1에서 살펴본 코드를 컴포지션 API를 사용하여 위에서 말하는 필요성에 대해 직접 느껴보도록 합시다.

App.Composition.vue

<template>
  <h1 @click="increase">
    {{ count }} / {{ doubleCount }}
  </h1>
  <h1>
    {{ message }} / {{ reversedMessage }}
  </h1>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const message = ref('Hello World!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })

    const count = ref(0)
    const doubleCount = computed(() => count.value * 2)
    function increase() {
      count.value += 1
    }

    return {
    message,
    reversedMessage,
    count,
    doubleCount,
    increase
    }
  }
}
</script>