data() 옵션

Vue.js 3의 data 옵션은 컴포넌트의 반응형 데이터를 정의하는 곳입니다. 이 옵션에서 정의된 데이터는 Vue 인스턴스에서 사용되며, Vue의 반응형 시스템에 의해 자동으로 추적됩니다. 즉, 데이터가 변경되면 Vue는 자동으로 DOM을 업데이트합니다.

data는 함수로 정의해야 합니다. 컴포넌트가 여러 번 인스턴스화될 때마다 각 인스턴스마다 독립적인 데이터를 갖도록 하기 위함입니다.

1. 기본 사용법

Vue.js 3에서 data 옵션은 함수로 정의되어야 하며, 이 함수는 객체를 반환합니다.

 

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "Hello, Vue 3!"
    };
  },
  methods: {
    updateMessage() {
      this.message = "Message has been updated!";
    }
  }
};
</script>

 

설명:

• data() 함수는 객체를 반환합니다. 이 객체 안에는 컴포넌트에서 사용할 데이터가 포함됩니다.
• message라는 데이터 속성은 Vue 인스턴스의 반응형 데이터로, {{ message }}로 템플릿에서 출력됩니다.
• 버튼을 클릭하면 updateMessage 메소드가 실행되고, message 값이 변경됩니다. 이때 Vue는 자동으로 DOM을 업데이트하여 새로운 메시지를 표시합니다.

2. data 옵션에서 기본 값 설정하기

data 안에 기본 데이터를 설정할 수 있으며, 이 값들은 컴포넌트가 생성될 때 자동으로 설정됩니다.

<template>
  <div>
    <p>Counter: {{ counter }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    };
  },
  methods: {
    increment() {
      this.counter++;
    }
  }
};
</script>

 

설명:

• counter는 0으로 초기화됩니다.
• 버튼 클릭 시 increment 메소드가 호출되어 counter 값이 증가하고, 화면이 자동으로 업데이트됩니다.

3. data에서 다른 데이터 속성에 접근하기

컴포넌트의 data는 반응형이기 때문에 다른 데이터 속성을 쉽게 참조할 수 있습니다.

<template>
  <div>
    <p>{{ fullName }}</p>
    <button @click="updateNames">Update Names</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      firstName: "John",
      lastName: "Doe"
    };
  },
  computed: {
    fullName() {
      return `${this.firstName} ${this.lastName}`;
    }
  },
  methods: {
    updateNames() {
      this.firstName = "Jane";
      this.lastName = "Smith";
    }
  }
};
</script>

 

설명:

• fullName은 firstName과 lastName을 결합하여 표시하는 computed 속성입니다.
• 버튼을 클릭하면 updateNames 메소드가 실행되어 firstName과 lastName을 업데이트하고, fullName은 자동으로 변경됩니다.

결론

• data 옵션은 Vue 인스턴스의 상태를 정의하는 중요한 부분입니다.
• data()는 항상 함수로 작성해야 하며, 객체를 반환해야 합니다.
• Vue의 반응형 시스템에 의해 데이터 변경 시 자동으로 UI가 업데이트됩니다.