개발에서의 인스턴스

<aside> ✏️

인스턴스(instance)는 객체 지향 프로그래밍(OOP)의 핵심 개념 중 하나로, 클래스로부터 생성된 객체를 의미합니다. 클래스는 객체의 설계도 같은 역할을 하며, 인스턴스는 이 설계도를 바탕으로 생성된 실체를 말합니다.

</aside>

<aside> 📍

Vue 컴포넌트를 실제로 DOM에 마운트할 때, Vue 내부에서 생성되는 컴포넌트의 실체 객체 실체 객체(Object)

</aside>

이 인스턴스는 컴포넌트의 상태, 반응형 시스템, DOM 연결, 템플릿 렌더링, 이벤트 처리 등을 다 포함한다.

📌 인스턴스가 만들어지는 시기?

Vue는 컴포넌트를 화면에 렌더링하기 위해 아래 단계를 거친다.

1. createApp(App) 호출
2. 내부적으로 setup( )실행 (Composition API)
3. 반환된 ref, reactive, computed 들을 Vue 내부가 관리 가능한 proxy 객체로 구성
4. app.mount( ’ #app ’ ) 호출 시 ⇒ 드디어 컴포넌트 인스턴스가 생성되어 DOM에 연결

즉, setup( )은 인스턴스를 준비하는 과정이고,

mount( )가 호출된 이후에 진짜로 Vue 컴포넌트 인스턴스가 만들어진다.

✏️예시

<!-- App.vue -->
<script setup lang="ts">
import { ref, onMounted } from 'vue';

const message = ref<string>('Hello Composition API');

onMounted(() => {
  console.log('✅ [onMounted] message.value:', message.value);
});
</script>

<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

// main.ts
import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
const vm = app.mount('#app');

console.log('🔍 [After mount] Vue instance (vm):', vm);