프론트엔드 노트

Vue.js는 현대 웹 애플리케이션에서 가장 인기 있는 프레임워크 중 하나로, 특히 반응형 시스템이 매우 강력하다는 평가를 받고 있습니다. Vue 3에서는 이러한 반응성 시스템이 더욱 발전하여 개발자들이 더욱 쉽게 상태 관리를 할 수 있도록 돕고 있습니다. 이번 글에서는 Vue 3의 반응형 시스템에 대해 깊이 있게 알아보겠습니다.

Vue 3의 반응형 시스템

Vue 3의 반응형 시스템은 Proxy를 기반으로 작동합니다. 이는 기존 Vue 2에서 사용하던 Object.defineProperty 방식보다 성능이 뛰어나고, 더 직관적인 API를 제공합니다. Proxy를 사용함으로써 Vue 3은 객체의 모든 속성을 감지하고, 해당 속성이 변경되었을 때 이를 자동으로 업데이트할 수 있습니다.

Vue 3에서의 반응형 상태 생성

Vue 3의 반응형 상태를 생성하기 위해서는 reactive 함수를 사용합니다. 이 함수는 객체를 인자로 받아 반응형 객체를 반환합니다. 다음은 간단한 예제입니다.

import { reactive } from 'vue';

const state = reactive({
  count: 0
});

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

console.log(state.count); // 0
increment();
console.log(state.count); // 1

위 코드에서 state는 반응형 객체이며, increment 함수는 count 속성을 증가시킵니다. count의 값이 변경되면 이를 사용하는 모든 컴포넌트가 자동으로 업데이트됩니다.

반응형 데이터 사용하기

반응형 데이터는 Vue 컴포넌트에서 유용하게 사용할 수 있습니다. 예를 들어, Vue 컴포넌트에서 state를 사용하여 사용자 인터페이스를 동적으로 업데이트할 수 있습니다.

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

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

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

    return { state, increment };
  }
};
</script>

위 예제에서는 setup 함수를 사용하여 반응형 상태를 정의하고, 템플릿에서 이를 표시하고 있습니다. 버튼을 클릭할 때마다 count가 증가하고, 화면에 즉시 반영됩니다.

computed와 watch

Vue 3에서는 반응형 데이터를 더욱 효과적으로 관리하기 위해 computed와 watch를 제공합니다.

computed: 특정 반응형 상태를 기반으로 계산된 값을 캐시하여 성능을 개선합니다.
watch: 특정 반응형 상태의 변화를 감지하고, 이에 따라 특정 작업을 수행합니다.

다음은 computed와 watch의 사용 예제입니다.

<template>
  <div>
    <p>Count: {{ state.count }}</p>
    <p>Double Count: {{ doubleCount }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
import { reactive, computed, watch } from 'vue';

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

    const doubleCount = computed(() => state.count * 2);

    watch(() => state.count, (newCount) => {
      console.log(Count changed: ${newCount});
    });

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

    return { state, increment, doubleCount };
  }
};
</script>

여기서 doubleCount는 state.count의 두 배 값을 반환하며, watch는 count가 변경될 때마다 로그를 출력합니다. 이를 통해 데이터의 변화를 추적하고, 필요한 작업을 수행할 수 있습니다.

마무리

Vue 3의 반응형 시스템은 웹 애플리케이션의 상태 관리와 사용자 인터페이스 업데이트를 훨씬 더 간단하게 만들어줍니다. Proxy를 기반으로 하는 반응형 객체는 성능과 직관성을 모두 갖추고 있어, 개발자들이 복잡한 상태를 효과적으로 관리할 수 있도록 도와줍니다. reactive, computed, watch를 통해 다양한 상황에 맞춰 상태를 제어할 수 있으니, 이를 활용하여 더 나은 사용자 경험을 제공하는 웹 애플리케이션을 만들어 보세요.

Vue 3의 반응형 시스템 이해하기

Vue 3의 반응형 시스템

Vue 3에서의 반응형 상태 생성

반응형 데이터 사용하기

computed와 watch

마무리