데이터 선언 및 변경

Vue.js 데이터 선언 및 변경: 상세 가이드

서론

Vue.js는 간결하고 유연한 API를 통해 데이터와 템플릿을 연결하여 사용자 인터페이스를 구축하는 프론트엔드 프레임워크입니다. 이 글에서는 Vue.js에서 데이터를 어떻게 선언하고 변경하는지, 그리고 그 과정에서 발생하는 반응형 시스템의 작동 방식에 대해 심층적으로 살펴보겠습니다.

1. 데이터 선언

Vue 인스턴스 내에서 data 옵션을 사용하여 데이터를 선언합니다. data는 객체를 반환하는 함수여야 하며, 이 객체의 속성들이 컴포넌트의 데이터가 됩니다.

<template>
  <div>
    <p>현재 카운트: {{ count }}</p>
    <button @click="increment">증가</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

 

• 템플릿: {{ count }} 문법을 통해 데이터를 템플릿에 바인딩합니다.
• 스크립트: data 함수 내에서 count라는 속성을 초기화하고, increment 메서드를 통해 count 값을 증가시킵니다.

728x90

2. 데이터 변경

Vue.js의 가장 큰 특징 중 하나는 데이터 변경 시 자동으로 화면이 업데이트된다는 것입니다. 이는 Vue의 반응형 시스템 덕분입니다. 데이터를 변경하는 방법에는 여러 가지가 있습니다.

• 직접 할당:

  this.count = this.count + 1;
  

   
• 메서드 호출:

  increment() {
    this.count++;
  }
  

   
• 컴퓨티드 프로퍼티:

  computed: {
    doubleCount() {
      return this.count * 2;
    }
  }
  

   

3. 반응형 시스템

Vue.js는 데이터 변경을 감지하고 이에 따라 DOM을 업데이트하는 효율적인 시스템을 가지고 있습니다. 핵심은 다음과 같습니다.

• 데이터 프로퍼티: Vue는 data 객체의 모든 프로퍼티를 추적하여 변경 사항을 감지합니다.
• 의존성 추적: 템플릿, 컴퓨티드 프로퍼티, watch에서 사용되는 데이터 프로퍼티에 대한 의존성을 추적합니다.
• 가상 DOM: 실제 DOM을 직접 조작하는 대신 가상 DOM을 사용하여 변경 사항을 추적하고 최소한의 DOM 조작만 수행합니다.

4. 깊은 변경 감지 (Deep Watching)

Vue는 기본적으로 객체 내부의 프로퍼티 변경은 감지하지 않습니다. 깊은 변경 감지를 위해 Vue.set 메서드를 사용하거나 $set 인스턴스 메서드를 사용할 수 있습니다.

this.$set(this.obj, 'newProp', 'value');

 

5. 배열 변경

Vue는 배열 메서드를 래핑하여 변경 사항을 감지합니다. 하지만 일부 메서드는 직접 배열을 수정하기 때문에 Vue가 감지하지 못할 수 있습니다. 이럴 때는 Vue.set 또는 배열의 splice 메서드를 사용하여 변경해야 합니다.

// Vue가 감지하지 못하는 경우
this.items.push(newItem);

// Vue가 감지하는 경우
this.items.splice(this.items.length, 0, newItem);

 

6. watch

데이터 변경 시 특정 작업을 수행해야 할 경우 watch 옵션을 사용합니다.

watch: {
  count(newValue, oldValue) {
    console.log('count 변경됨', newValue, oldValue);
  }
}

 

결론

Vue.js의 데이터 선언 및 변경은 간결하고 직관적이며, 강력한 반응형 시스템을 통해 효율적인 개발을 가능하게 합니다. 이 글을 통해 Vue.js의 데이터 처리 방식에 대한 이해를 높이고, 더욱 복잡한 Vue 애플리케이션을 개발하는 데 도움이 되기를 바랍니다.