반응형 데이터 (반응성)

왜 Composition API(컴포지션 API)가 필요할까?

수 백개의 컴포넌트를 생각하면 코드 공유와 재사용이 특히 중요하다.
작업을 할 때 관련 코드의 옵션 블록을 지속적으로 넘어서 확인해야하는데
동일한 타겟과 관련있는 코드를 함께 배치하면 더 좋다. 이게 컴포지션 API가 하는 일이다.

ref 기능 가져와서 초기값 만들어주기

아래 코드를 분석해보자.

코드를 조금 더 최적화하기 위해 setup() 이라는 메소드를 통해 컴포지션 API를 활용할 수 있다. setup 내부에 있는 기본적인 변수는 반응성을 가지지 않기 때문에 vue라는 패키지에서 ref라는 기능을 가지고와서 함수처럼 실행을 해야한다. 함수에서 어떠한 반응성을 가진 기본적인 객체 데이터가 반환이 되고 객체 데이터이기 때문에 내부에 있는 value라는 속성을 통해 함수를 실행 할 수 있다. 이 함수를 실행할 때 초기값으로 적용한 0이 최초로 한번 적응이 되는 구조고 increse가 실행될때마다 1씩 증가한다.
그리고 나서 반응성을 가진 count를 반환한다.
반환을 하면 템플릿 구문에서는 .value라는 속성을 붙여줄 필요가 없다.

App.vue

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

<script>
import { ref } from 'vue'

export default {
  setup() {
    let count = ref(0)
    function increase() {
      count.value += 1
    }

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

<style>

</style>