컴포지션 API란?

컴포지션 API란 컴포넌트 내에서 사용하는 특정 기능을 갖는 코드를 유연하게 구성하여 사용할 수 있도록 Vue3버전에 추가된 함수 기반의 API입니다.

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와 관련된 로직을 나뉘어 작성이 된경우 코드가 동작하는 로직을 이해하기 위해서 위 아래로 왔다갔다 하며 상당히 많은 부분을 해석하며 가독성이 떨어지고 유지보수성이 낮아지게 됩니다.

이를 setup이라는 메소드를 통해 컴포지션API 만들어 활용한다면 보다 해석하기 좋은 형태로 만들 수 있습니다.

<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>

하지만 컴포지션 API의 경우 기본적으로 반응성이 없습니다. 따라서 특정한 데이터를 만들어낼 때, 반응성이 가지도록 해주기 위해서 refs라는 기능을 활용할 수 있습니다.

refs기능을 가져와 함수처럼 실행을 하면 기본적으로 반응성을 가진 객체를 반환하게 되며, 그 객체의 내부에 있는 value라는 속성을 통해 반응성을 가지게 만들어줄 수 있습니다.