컴포지션 API - 기본 옵션과 라이프사이클

Vue.js의 컴포지션 API의 기본 옵션과 라이프사이클에 대해 살펴봅시다. 더욱 자세한 사항은 공식 문서를 참고해주시기 바랍니다.

이전 시간까지 알아본대로 컴포지션 API는 무조건 사용을 추천하는 것은 아닙니다. 필요에 따라, 특히 코드가 복잡해지고 로직이 많이 섞여있는 컴포넌트 내부에서 기존의 방식보다 직관적으로 정리하여 코드를 최적화하는 용도로 사용할 수 있습니다.

1. 컴포지션 API 비교 예시

실제로 컴포지션 API를 사용하기 전과 사용 후의 코드를 비교하여 작성법과 활용하는 데에 있어 장점을 눈으로 보도록 합시다.

특히 지금까지 배웠던 기본 옵션과 라이프사이클을 활용하여 코드에 적용한다는 점 참고 부탁드립니다.

1.1 컴포지션 API 사용 전 코드 예시

App.vue

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

<script>
export default {
  data() {
    return {
      count: 0,
      message: 'Hello world!'
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    },
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  watch: {
    message(newValue) {
      console.log(newValue)
    }
  },
  created() {
    console.log(this.message)
  },
  mounted() {
    console.log(this.count)
  },
  methods: {
    increase() {
      this.count += 1
    },
    changeMessage() {
      this.message = 'Good?!'
    }
  }
}
</script>

1.2 컴포지션 API 사용 후 코드 예시

App.vue

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

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

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

    const message = ref('Hello world!')
    const reversedMessage = computed(() => {
      return message.value.split('').reverse().join('')
    })
    watch(message, newValue => {
      console.log(newValue)
    })
    function changeMessage() {
      message.value = "Good?!"
    }
    console.log(message.value)    // 라이프사이클 훅: created()

    onMounted(() => {             // 라이프사이클 훅: mounted()
      console.log(count.value)
    })

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

2. 라이프사이클 호출 방법

컴포지션 API 사용 시에는 라이프사이클 훅에 접두사 on을 추가함으로서 컴포넌트의 라이프사이클 훅에 접근할 수 있습니다.

다음 표에는 setup() 내에 라이프사이클 훅이 호출되는 방법이 포함되어 있습니다.

Options API	setup 내부의 훅
beforeCreate	필요하지 않음*
created	필요하지 않음*
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeUnmount	onBeforeUnmount
unmounted	onUnmounted
errorCaptured	onErrorCaptured
renderTracked	onRenderTracked
renderTriggered	onRenderTriggered

setup은 beforeCreate, created 라이프사이클 훅 사이에 실행되는 시점이므로beforeCreate()가 setup() 직전에 호출되고 created()가 setup() 직후에 호출되는 타이밍을 가짐), 명시적으로 정의할 필요가 없습니다. 다시 말해, 위 두 훅에서 작성되는 모든 코드는 setup() 내부에 직접 작성해야합니다.