[콜럼Vue스] Vue인스턴스

Vue 인스턴스는 Vue.js 애플리케이션의 핵심 요소로, Vue에서 제공하는 대부분의 기능을 사용하는 기본 단위임. Vue 인스턴스는 화면에 데이터를 표시하거나 사용자 입력을 처리하는 데 필요한 모든 기능을 제공하며, 컴포넌트 기반으로 동작하는 Vue 애플리케이션의 최초 진입점임.

애플리케이션 인스턴스와 루트 컴포넌트 인스턴스

1. Vue 인스턴스 기본 구조

Vue 인스턴스를 생성할 때는 **new Vue()**를 사용하여 인스턴스를 만들고, 이를 특정 HTML 요소에 마운트(연결)하여 화면에 데이터를 렌더링함.

<div id="app">
  {{ message }}
</div>

<script>
  new Vue({
    el: '#app',  // 마운트할 DOM 요소
    data: {      // 데이터 속성
      message: 'Hello Vue!'
    }
  });
</script>

 

• el: Vue 인스턴스가 마운트될 DOM 요소를 지정함. 여기서는 id="app"인 HTML 요소에 Vue 인스턴스를 연결.
• data: Vue 인스턴스에서 사용할 데이터를 정의함. 템플릿에서 이 데이터를 {{ message }}와 같이 사용할 수 있음.
• message라는 데이터가 바인딩되어 DOM에 렌더링됨.

2. Vue 인스턴스의 주요 옵션

Vue 인스턴스를 구성할 때, 여러 가지 옵션 속성을 정의할 수 있음. 대표적인 옵션으로는 el, data, methods, computed 등이 있음.

(1) el (엘리먼트)

• 마운트할 DOM 요소를 지정함. 해당 요소는 Vue 인스턴스에 의해 관리되며, 인스턴스가 특정 부분을 렌더링할 위치를 알려줌.

(2) data (데이터)

• Vue 인스턴스에서 관리할 상태 데이터를 정의함. 이 데이터는 양방향 바인딩을 통해 뷰와 연결되며, 템플릿 안에서 사용될 수 있음.

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

(3) methods (메서드)

• Vue 인스턴스에서 사용할 **함수(메서드)**를 정의하는 옵션임. 사용자 이벤트(버튼 클릭 등)와 연결되어 동작할 수 있음.

methods: {
  increment() {
    this.count++;
  }
}

• **this**는 Vue 인스턴스 자체를 가리키며, data 속성에 접근할 수 있음.

(4) computed (계산된 속성)

• computed 속성은 캐싱된 값을 제공하며, 반응형 데이터를 기반으로 계산된 값을 제공함. 데이터가 변경될 때만 다시 계산되어 성능 최적화에 유리함.

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

• reversedMessage는 message 데이터를 기반으로 계산된 값이며, message가 변경될 때만 다시 계산됨.

5) watch (감시자)

• watch 속성은 특정 데이터가 변경될 때마다 특정 로직을 실행할 수 있도록 하는 기능임.

watch: {
  count(newValue, oldValue) {
    console.log(`Count changed from ${oldValue} to ${newValue}`);
  }
}

• count가 변경될 때마다 자동으로 호출됨.

3. Vue 인스턴스의 생명주기 (Lifecycle Hooks)

Vue 인스턴스는 생성되고 DOM에 마운트되며, 데이터가 업데이트되는 동안 여러 단계를 거치는데, 이를 **생명주기(lifecycle)**라고 함. Vue는 각 생명주기 단계에서 특정한 이벤트가 발생하며, 이 이벤트에 대응하는 **훅(hook)**을 제공함.

주요 생명주기 훅:

• beforeCreate: Vue 인스턴스가 생성되기 전에 호출됨.
• created: 인스턴스가 생성된 후, 데이터가 초기화된 직후 호출됨.
• beforeMount: 인스턴스가 DOM에 마운트되기 전 호출됨.
• mounted: 인스턴스가 DOM에 완전히 마운트된 후 호출됨.
• beforeUpdate: 데이터가 변경되어 DOM이 다시 렌더링되기 전에 호출됨.
• updated: 데이터가 변경되어 DOM이 다시 렌더링된 후 호출됨.
• beforeDestroy: 인스턴스가 파괴되기 직전에 호출됨.
• destroyed: 인스턴스가 파괴된 후 호출됨.

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  created() {
    console.log('Vue instance created');
  },
  mounted() {
    console.log('Vue instance mounted');
  }
});

• created와 mounted 훅이 각각 인스턴스 생성 및 DOM에 마운트된 후에 호출됨.

4. Vue 인스턴스의 재사용 및 컴포넌트화

Vue 인스턴스는 특정 HTML 요소와 연결되며, 재사용 가능한 구조로 만들기 위해 컴포넌트로 분리할 수 있음. Vue의 컴포넌트 시스템은 대규모 애플리케이션에서 코드를 모듈화하고 재사용성을 높이는 데 유용함.

Vue.component('my-component', {
  template: '<p>This is a custom component!</p>'
});

new Vue({
  el: '#app'
});

• 컴포넌트를 사용하여 여러 인스턴스를 관리하고, 반복되는 UI를 효율적으로 재사용할 수 있음.

 

요약:

• Vue 인스턴스는 Vue 애플리케이션의 핵심 구성 요소로, 데이터와 템플릿을 연결하고, 사용자와의 상호작용을 관리함.
• 인스턴스는 el, data, methods, computed, watch 등 다양한 옵션을 통해 정의되며, 생명주기 훅을 통해 인스턴스의 상태를 관리할 수 있음.
• Vue 인스턴스는 컴포넌트화를 통해 재사용 가능하며, 더 복잡한 애플리케이션을 모듈화하여 쉽게 관리할 수 있음.