반응형 데이터.md

반응형 데이터 (반응성)

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

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

컴포지션 API를 통한 코드 정리

• setup 내부에서 정의된 데이터는 반응성이 없는 상태

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

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

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

• 개발 서버 켠 후 h1 클릭 시 반응하지 않음
  • ref를 통해 반응성 부여
• count는 반응성을 가질 수는 있으나 객체 데이터로 반환되다 보니 하나의 데이터로 직접 사용 불가능
  • value 속성을 통해 해당 내용 접근 가능

동작

• 코드를 최적화하기 위해 setup이라는 메소드를 사용하여 컴포지션 API 활용 가능
• setup 메소드 내에서 정의된 변수는 반응성을 가지지 않음
  • vue 패키지에서 ref를 가지고 와 함수처럼 실행하면 반응성을 가지는 객체 데이터 반환
  • 객체 데이터 내부에 있는 value를 이용하여 초기값 0이 최초 한 번 적용
  • increase 함수 실행될 때마다 숫자가 1씩 증가하는 로직
  • 반응성을 가지는 count 반환
• setup 내의 반응성을 가지는 count는 반환되면 template에서 value 속성을 붙여 줄 필요가 없음

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

요약

• 컴포지션 API를 활용할 때는 반응성을 가지는 데이터를 만들기 위해 ref라는 기능을 vue 패키지에서 가지고 온 후 초기값을 만들어 줘야 함
• 만들어진 데이터는 setup 내부에서 사용할 때 value 속성을 통해 데이터처럼 활용해야 함
• 정리된 데이터를 반환하면 다음부터 value를 사용하지 않고 template에서 데이터 활용 가능