27. Vue - 컴포지션 API란?

1. 공식 문서 

 

공식문서 바로가기

소개 | Vue.js

 

---

2. 컴포지션 API란?

- Vue 객체를 만들다 보면 다양한 속성(data, computed, methods, etc)들을 작성하게 된다. 

- 이전의 포스팅에서도 많이 사용해 보았지만, 단순한 예제코드를 이용했기 때문에 코드를 이해하고 읽는데에 큰 불편함이 없었다. 

- 하지만, 코드가 복잡해지면 속성의 내용이 복잡해지면서 어떤 코드가 어떤 기능을 하는지 구분하기가 힘들어진다.

- 정리하자면, 코드의 가독성과 이해도가 떨어진다. 

- 이처럼 다양한 속성에 대한 코드의 가독성과 이해도를 높일 수 있도록 코드를 정리하는 방법 중 하나가 컴포지션 API다. 

 

a) 예제코드

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

 

클릭하면 확대됩니다.

- 위의 코드는 다음과 같이 역할이 구분된다. 

- 노란색 블럭: count, doubleCount, increase는 count와 관련

- 빨간색 블럭: message, reversedMessage는 message와 관련

- 코드가 뒤죽박죽 정리되어 있기 때문에 가독성과 이해도가 떨어질 수 밖에 없다. 

- 이 코드를 컴포지션 API를 통해서 정리하면 다음과 같다. 

 

b) 컴포지션 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>

 

클릭하면 확대됩니다.

- 빨간색 블럭: message, reversedMessage는 message와 관련

- 노란색 블럭: count, doubleCount, increase는 count와 관련

- 초록색 블럭: 출력부

- 이처럼 복잡했던 코드 구조를 컴포지션 API를 사용하여 깔끔하게 정리할 수 있다.