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

컴포지션API

1. 컴포지션 API 활용

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

이를 vue.js에서 제공하는 컴포지션 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>