Vue

[Vue] Vue의 반응형 API : 데이터 바인딩

yo09 2025. 2. 18. 14:34

Vue.js의 반응형 API는 데이터가 변경될 때 UI를 자동으로 업데이트하는 시스템이다. 이 API는 애플리케이션의 상태 관리와 UI 업데이트를 효율적으로 처리할 수 있게 해준다. Vue의 주요 반응형 API인 ref(), reactive(), computed(), watch(), watchEffect()에 대해 다루고자 한다.

 

 

1. ref() - 기본 타입의 반응형 데이터

ref()는 숫자, 문자열, 불리언 등 기본 타입을 반응형으로 만드는 API이다. ref()로 생성된 값은 .value를 통해 접근하고 수정해야 한다.

<script setup>
import { ref } from 'vue'

const count = ref(0);

const increment = () => {
  count.value++; // .value로 값에 접근하고 수정
}
</script>

<template>
  <p>카운트: {{ count }}</p>
  <button @click="increment">증가</button>
</template>
  • count는 ref()를 사용하여 반응형으로 선언된 값이다.
  • .value를 통해 값에 접근하고 수정할 수 있다.

 

2. reactive() - 객체와 배열의 반응형 데이터

reactive()는 객체나 배열을 반응형으로 만드는 API이다. reactive()로 만든 데이터는 .value 없이 속성에 직접 접근하고 수정할 수 있다.

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

const user = reactive({
  name: '홍길동',
  age: 25
});

const updateUser = () => {
  user.age++; // .value 없이 직접 속성 수정
}
</script>

<template>
  <p>이름: {{ user.name }}</p>
  <p>나이: {{ user.age }}</p>
  <button @click="updateUser">나이 증가</button>
</template>
  • reactive()는 객체나 배열을 반응형 프록시로 변환해준다.
  • 내부 속성값의 변경을 자동으로 감지하고, .value 없이 속성을 직접 수정할 수 있다.

3. computed() - 계산된 속성

computed()는 다른 반응형 데이터에 의존하여 자동으로 계산되는 값을 정의하는 API이다. computed()로 정의된 값은 종속된 값이 변경될 때마다 자동으로 다시 계산된다.

<script setup>
import { ref, computed } from 'vue'

const price = ref(100);
const quantity = ref(2);

const totalPrice = computed(() => price.value * quantity.value);
</script>

<template>
  <p>가격: {{ price }} 원</p>
  <p>수량: {{ quantity }}</p>
  <p>총 가격: {{ totalPrice }} 원</p>
</template>
  • totalPrice는 price와 quantity의 곱으로 자동 계산된다.
  • price나 quantity가 변경되면 totalPrice는 자동으로 다시 계산된다.

4. watch() - 데이터 변화 감지

watch()는 특정 데이터의 변화를 감지하고, 변화를 감지한 후 추가적인 작업을 수행하는 API이다. 이전 값과 새로운 값을 추적할 수 있어 특정 로직을 실행할 때 유용하다.

<script setup>
import { ref, watch } from 'vue'

const count = ref(0);

watch(count, (newVal, oldVal) => {
  console.log(`count 변경: ${oldVal} → ${newVal}`);
});

const increment = () => {
  count.value++;
}
</script>

<template>
  <p>카운트: {{ count }}</p>
  <button @click="increment">증가</button>
</template>
  • watch()는 count가 변경될 때마다 newVal과 oldVal을 추적하고, 값의 변화를 감지한 후 console.log로 변경된 값을 출력한다.

5. watchEffect() - 자동 감지 및 실행

watchEffect()는 내부에서 사용된 모든 반응형 상태를 자동으로 감지하고 실행하는 API이다. watch()와 달리 명시적으로 어떤 변수를 감시할지 지정할 필요 없다. 변화가 발생하면 자동으로 실행된다.

<script setup>
import { ref, watchEffect } from 'vue'

const count = ref(0);

watchEffect(() => {
  console.log(`count 값: ${count.value}`);
});

const increment = () => {
  count.value++;
}
</script>

<template>
  <p>카운트: {{ count }}</p>
  <button @click="increment">증가</button>
</template>
  • watchEffect()는 count의 값이 변경될 때마다 자동으로 해당 값을 출력한다.
  • 이전 값에 대한 모니터링은 불가능하지만, 변화가 있을 때마다 자동으로 실행된다.

6. readonly() - 읽기 전용 데이터

readonly()는 반응형 데이터를 읽기 전용으로 만들어 수정할 수 없도록 하는 API이다. readonly()를 사용하면 원본 데이터를 변경할 수 없고, 상태를 보호할 수 있다.

<script setup>
import { ref, readonly } from 'vue'

const message = ref('초기 메시지');
const readOnlyMessage = readonly(message);

// readOnlyMessage.value = "test";  // 오류 발생
</script>

<template>
  <p>메시지: {{ message }}</p>
  <p>읽기 전용 메시지: {{ readOnlyMessage }}</p>
</template>
  • readOnlyMessage는 읽기 전용이므로, 값을 변경하려고 하면 오류가 발생한다.
  • 이는 데이터가 변경되지 않도록 보호할 때 유용하다.