반응형 기초 | Vue.js

반응형 상태 설정

→ reactive() 함수를 사용해서 객체 또는 배열을 반응형으로 만들 수 있다.

import { reactive } from 'vue'

const state = reactive({ count: 0 })

• 반응형 객체는 일반 객체처럼 작동하지만, Vue가 속성에 접근 및 반응형 객체의 변경사항을 감지할 수 있다는 점이 다르다.

• 컴포넌트의 템플릿에서 반응형 상태를 사용하려면, 컴포넌트의 setup() 함수에서 반응형 상태를 선언하고 반환해야 한다.

import { reactive } from 'vue'

export default {
  // `setup`은 컴포지션 API에서만 사용되는 특별한 훅입니다.
  setup() {
    const state = reactive({ count: 0 })

    // 상태를 템플릿에 노출
    return {
      state
    }
  }
}

<div>{{ state.count }}</div>

• 동일한 범위에서 반응형 상태를 변경하는 함수를 선언하고, 상태와 함께 메서드로 노출할 수 있다.

import { reactive } from 'vue'

export default {
  setup() {
    const state = reactive({ count: 0 })

    function increment() {
      state.count++
    }

    // 함수를 반환하는 것을 잊지 마세요.
    return {
      state,
      increment
    }
  }
}

• 노출된 메서드는 일반적으로 이벤트 리스너로 사용된다.

<button @click="increment">
  {{ state.count }}
</button>