[Vue] reactive

개요

Vue 3의 reactive 기능은 Composition API의 중요한 부분이며, 복잡한 객체를 반응형 데이터로 만드는 데 사용된다. reactive를 사용하면 객체의 모든 속성이 Vue의 반응형 시스템에 통합되어, 해당 객체의 속성이 변경될 때마다 Vue가 이를 감지하고 자동으로 UI를 업데이트한다.

기본 사용법

reactive 함수를 사용하여 객체를 반응형으로 만들기 위해선, 해당 함수에 객체를 전달한다. 이렇게 생성된 객체는 원본 객체와 동일한 속성을 가지지만, Vue의 반응형 시스템에 의해 추적된다. 아래 예시에서 state 객체는 reactive를 사용하여 생성된다.

<script setup>
import { reactive } from 'vue';

const state = reactive({ count: 0, message: 'Hello' });

function increment() {
    state.count++;
}

function updateMessage(newMessage) {
    state.message = newMessage;
}
</script>

<template>
    <button @click="increment">Increment</button>
    <p>Count is: {{ state.count }}</p>
    <input v-model="state.message" />
    <p>Message: {{ state.message }}</p>
</template>

reactive 객체의 속성들은 템플릿에서 직접 바인딩할 수 있다. 이 경우 Vue의 템플릿 시스템이 객체의 속성들을 자동으로 추적한다.

결론

Vue 3에서 reactive는 복잡한 객체의 상태를 관리하는 데 매우 유용하다. reactive 객체의 모든 속성은 Vue의 반응형 시스템에 의해 자동으로 추적되며, 이를 통해 개발자는 상태의 변경사항을 쉽게 관리하고 UI를 효율적으로 업데이트할 수 있다. reactive는 특히 여러 속성을 포함하는 복잡한 상태를 관리할 때 유리하며, Vue 애플리케이션의 구조를 더 모듈화하고 유지 관리하기 쉽게 만든다.