28. Vue - 컴포지션 API 작성방법

1. 예제 코드

[App.vue]

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

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increase() {
      this.count += 1
    }
  }
}
</script>

 

[출력화면]

[코드 설명]

- 위의 코드는 화면의 숫자를 클릭하면 increase 메소드가 작동하여 숫자가 증가하는 방식이다.

- this를 사용하여 데이터 객체인 count를 참조하여 반응성을 활용한 코드이다. 

- 위의 코드를 기반으로 컴포지션 API를 작성해보자.  

 

---

2. 컴포지션 API 전환 

a) 1차 전환 - 반응성이 구현되지 않은 상태 

[App.vue]

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

<script>
export default {
  setup() {
    let count = 0
    function increase() {
      count += 1
    }

    return {
      count, 
      increase
    }
  }
}
</script>

- 위의 코드를 구현한 뒤, 실제로 숫자를 클릭해보면 increase가 작동하지 않는 것을 확인할 수 있다. 

- 더 정확히 이야기 해보면 increase 메소드가 작동하지 않는 것이 아니라 화면이 업데이트(= 새로고침)되지 않는 것이다.

- 즉, 반응성의 구현이 되지 않은 상태이다. 이를 확인해보고 싶다면 다음과 같이 알아볼 수 있다. 

 

클릭하면 확대됩니다. 

- function 부분에 위의 사진과 같이 출력문을 작성한 후, 개발자 도구를 통해서 확인해보면 다음과 같은 결과가 나온다. 

 

 

클릭하면 확대됩니다.

- 사실 내부적으로 increase 메소드는 아주 잘 작동하고 있다. 

- count 변수의 값도 클릭할 때마다 증가하고 있다. 

- 반응성의 부재로 화면 새로고침이 되지 않아 그 값을 출력하지 못 할 뿐이다. 

 

 

b) 반응성 구현하기 - ref

- 이전 포스팅에서 ref에 대해서 배워보았다. 

- 반응성을 구현하기 위해서는 여기에서도 ref가 쓰인다. 

- 어떻게 사용하는지 알아보자. 

 

[App.vue]

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

<script>
import { ref } from 'vue'
export default {
  setup() {
    let count = ref(0) // count를 ref객체로 만든다. 괄호() 안에 초기값을 지정한다. 
    function increase() {
      count.value += 1 
      // count는 ref의 객체이기 때문에 
      // count의 값을 변경하기 위해서는 value 속성을 불러와야 한다. 
    }
    return {
      count, 
      increase
    }
  }
}
</script>

 

[출력화면]

반응성이 잘 작동한다.