[콜럼Vue스] data option

data 옵션은 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용함.

관리와 추적 의 의미는 변경을 탐지하고 추적하여 화면을 갱신하겠다는 뜻으로 이해.

data 옵션은 반드시 객체를 리턴하는 함수로 부여되어야 함.

Vue 2.x에서는 직접 객체를 지정하기도 했으나 3.x 버전부터는 함수가 부여되어야만 함.

만일 직접 객체를 지정하면 다음과 같은 오류를 볼 수 있음.

이미지 출처 : 원쌤의 Vue.js 퀵스타트

 

Vue 인스턴스에서 **데이터 옵션(data 옵션)**은 Vue 컴포넌트의 상태를 정의하는 핵심 요소로, 컴포넌트에서 사용할 데이터를 정의하고, 이 데이터를 통해 뷰(View)와 양방향 데이터 바인딩을 할 수 있게 해줌. Vue의 반응성 시스템에 의해 data에 정의된 데이터가 변경되면, 화면도 자동으로 리렌더링됨.

 

1. data 옵션의 기본 사용법

data 옵션은 Vue 인스턴스나 컴포넌트에서 객체 형태로 정의되며, 템플릿에서 사용할 데이터를 담고 있음. 이 데이터는 Vue의 반응형 시스템에 의해 변경사항을 감지하고, 자동으로 UI를 업데이트함.

<div id="app">
  <p>{{ message }}</p> <!-- message가 화면에 출력됨 -->
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    }
  });
</script>

 

• **data**는 message라는 데이터를 정의하고 있으며, 이를 템플릿에서 **{{ message }}**로 참조할 수 있음.
• Vue의 양방향 바인딩에 의해, message가 변경되면 화면도 자동으로 업데이트됨.

2. data 옵션의 구조

data는 함수나 객체로 정의될 수 있음. Vue 인스턴스에서는 data를 객체 형태로 사용하고, 컴포넌트에서는 함수 형태로 정의하는 것이 권장됨.

(1) 객체로 정의하는 경우 (Vue 인스턴스)

Vue 인스턴스에서 data는 객체로 정의할 수 있음.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!',
    count: 0
  }
});

• 이 경우, message와 count라는 두 개의 데이터를 관리하게 됨.

(2) 함수로 정의하는 경우 (컴포넌트)

컴포넌트에서 data는 함수 형태로 정의해야 함. 이 함수는 객체를 반환하며, 이를 통해 각 컴포넌트 인스턴스가 독립적인 데이터를 가질 수 있음.

Vue.component('my-component', {
  data() {
    return {
      message: 'This is a component!',
      count: 0
    };
  }
});

 

• 함수로 정의하는 이유는 컴포넌트가 여러 인스턴스로 사용될 수 있기 때문에, 각 인스턴스가 독립된 데이터를 가지도록 하기 위함임.
• **return**을 통해 초기 데이터를 반환함.

3. 템플릿에서 data 참조하기

Vue의 템플릿에서는 data에 정의된 변수를 {{ }} 안에 넣어서 사용할 수 있음. 이를 통해 데이터를 뷰(View)에 바인딩할 수 있음.

<div id="app">
  <p>{{ message }}</p>
  <p>Count: {{ count }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!',
      count: 0
    }
  });
</script>

템플릿에서 **{{ message }}**를 통해 data의 message를 출력하고, {{ count }}를 통해 count 변수를 출력함.

 

4. data와 반응성

Vue에서 **data**에 정의된 변수는 **반응형(reactive)**으로 동작함. 즉, 데이터가 변경되면 자동으로 UI가 업데이트됨. Vue는 데이터 변경 사항을 감지하고, 그에 따라 DOM을 업데이트하는 시스템을 가지고 있음.

<div id="app">
  <p>{{ message }}</p>
  <button @click="changeMessage">Change Message</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      changeMessage() {
        this.message = 'Message Changed!';
      }
    }
  });
</script>

 

• 버튼을 클릭하면 changeMessage 메서드가 실행되어 message 데이터를 변경함.
• Vue의 반응형 시스템에 의해 message가 변경되면, UI도 자동으로 업데이트되어 **"Message Changed!"**가 화면에 출력됨.

5. data의 초기 값과 객체/배열 반응성

Vue에서 객체와 배열도 data에 포함될 수 있음. 하지만 객체의 프로퍼티나 배열의 요소를 추가/삭제할 때는 몇 가지 반응성 문제에 주의해야 함.

<div id="app">
  <p>Fruits: {{ fruits.join(', ') }}</p>
  <button @click="addFruit">Add Fruit</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      fruits: ['Apple', 'Banana', 'Cherry']
    },
    methods: {
      addFruit() {
        this.fruits.push('Orange');
      }
    }
  });
</script>

배열의 변경(push)은 Vue의 반응형 시스템에서 자동으로 감지되며, 배열이 업데이트되면 화면도 업데이트됨.

 

new Vue({
  el: '#app',
  data: {
    person: {
      name: 'Jerry',
      age: 25
    }
  },
  methods: {
    updateName() {
      this.person.name = 'Tom';
    }
  }
});

 

객체의 프로퍼티 변경은 자동으로 감지되어 UI가 업데이트됨. 그러나 새로운 프로퍼티를 추가하는 경우에는 Vue의 반응성 한계로 인해 바로 반응하지 않을 수 있음.

 

반응성을 유지하면서 객체에 프로퍼티 추가:

Vue.set(this.person, 'city', 'Seoul'); // 반응형으로 프로퍼티 추가

• **Vue.set()**을 사용하면 새로운 프로퍼티를 반응형으로 추가할 수 있음.

6. data의 초기 값과 data 반환 값의 타입

Vue의 data는 객체, 배열, 기본 타입(숫자, 문자열) 등을 포함할 수 있음. data가 반응형으로 동작하려면 반드시 객체 또는 함수 형태로 정의되어야 함.

data: {
  count: 0,
  message: 'Hello'
}

data: {
  items: ['item1', 'item2'],
  user: {
    name: 'Tom',
    age: 30
  }
}

배열과 객체는 Vue의 반응형 시스템에서 자동으로 감지되며, 배열의 요소 추가/제거, 객체의 프로퍼티 수정 등이 UI에 반영됨.

 

요약:

• data 옵션은 Vue 인스턴스 또는 컴포넌트의 상태를 관리하는 핵심 기능으로, Vue의 양방향 바인딩을 통해 템플릿에 데이터를 바인딩함.
• Vue는 반응형 시스템을 통해 data의 변경 사항을 감지하고, UI를 자동으로 업데이트함.
• 객체와 배열을 data로 정의할 수 있으며, Vue의 반응성 한계에 주의해야 함.
• 함수 형태로 data를 반환하면 컴포넌트 간 독립적인 데이터 관리를 할 수 있음.