Vue Instance, Component

1. Vue Instance (Vue 인스턴스)

Vue 인스턴스는 Vue.js 애플리케이션의 기본적인 구조이자 핵심 객체입니다. Vue 애플리케이션을 시작하기 위해 Vue 객체를 사용하여 인스턴스를 생성합니다. 이 인스턴스는 애플리케이션의 데이터, 메서드, 라이프사이클 훅 등을 포함하고, 애플리케이션이 실행되는 루트가 됩니다.

특징

• 루트 인스턴스: Vue 인스턴스는 애플리케이션의 루트 컴포넌트입니다. 즉, 애플리케이션의 가장 바깥쪽 컨테이너 역할을 하며, 해당 인스턴스에서부터 모든 하위 컴포넌트들이 연결되고 렌더링됩니다.
• 단일 인스턴스: Vue.createApp()으로 생성한 인스턴스는 하나의 애플리케이션을 나타냅니다. 이 인스턴스는 데이터 바인딩과 상태 관리를 담당합니다.
• Vue 인스턴스 속성:
  • data: 애플리케이션의 데이터를 정의합니다.
  • methods: 애플리케이션에서 사용할 메서드를 정의합니다.
  • computed: 계산된 속성.
  • watchers: 반응형 데이터 변경 감시기.
  • el: 마운트할 DOM 요소를 지정합니다.

예시

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

<script src="https://unpkg.com/vue@next"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello, Vue Instance!'
      };
    }
  });

  // Vue 인스턴스를 DOM에 마운트
  app.mount('#app');
</script>

 

위의 예제에서는 Vue.createApp을 통해 애플리케이션 인스턴스를 생성하고, message라는 데이터를 정의한 후 #app이라는 HTML 요소에 마운트합니다. message는 템플릿에서 출력되며, 화면에 "Hello, Vue Instance!"라고 표시됩니다.

2. Vue Component (Vue 컴포넌트)

Vue 컴포넌트는 Vue.js에서 UI를 구성하는 독립적이고 재사용 가능한 단위입니다. 컴포넌트는 Vue 애플리케이션을 구성하는 기본적인 블록이며, HTML, CSS, JavaScript를 결합한 형태로 UI를 구성합니다.

특징

• 재사용 가능: Vue 컴포넌트는 재사용 가능한 단위로, 한 번 정의한 컴포넌트를 애플리케이션 내에서 여러 번 사용할 수 있습니다.
• 독립성: 각 컴포넌트는 자체적으로 상태, 로직, UI를 관리합니다. 하나의 컴포넌트는 다른 컴포넌트와 독립적으로 동작할 수 있습니다.
• 하위 컴포넌트: Vue 컴포넌트는 컴포넌트 간의 중첩을 통해 UI를 계층적으로 구성할 수 있습니다. 컴포넌트는 부모와 자식 관계를 맺을 수 있으며, 부모 컴포넌트는 자식 컴포넌트를 포함하고 관리합니다.
• 컴포넌트 속성: Vue 컴포넌트는 props, data, computed, methods, watch 등을 정의할 수 있습니다.

예시

<div id="app">
  <p>{{ message }}</p>
  <child-component></child-component> <!-- 자식 컴포넌트 호출 -->
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
  // 자식 컴포넌트 정의
  const ChildComponent = {
    template: '<div>저는 자식 컴포넌트입니다!</div>'
  };

  const app = Vue.createApp({
    data() {
      return {
        message: 'Hello, Vue Components!'
      };
    },
    components: {
      'child-component': ChildComponent // 자식 컴포넌트 등록
    }
  });

  // Vue 인스턴스를 DOM에 마운트
  app.mount('#app');
</script>

 

위 코드에서는 자식 컴포넌트 ChildComponent를 정의하고, 이를 부모 컴포넌트(app) 내에서 <child-component></child-component>로 사용하고 있습니다. 자식 컴포넌트는 단순히 텍스트를 렌더링하며, 부모 컴포넌트는 message를 화면에 출력합니다.

Vue 인스턴스와 Vue 컴포넌트의 차이점

 특징                        Vue Instance                                                                           Vue Component

정의	Vue 애플리케이션의 루트 객체	애플리케이션의 재사용 가능한 UI 구성 요소
생성	Vue.createApp()을 사용해 애플리케이션 인스턴스 생성	Vue.component()를 사용하거나, createApp 내에서 정의
역할	애플리케이션의 상태와 로직을 관리	UI의 구성 요소를 관리
예시	Vue.createApp({ ... })	const MyComponent = { template: '<div>...</div>' }
데이터 관리	data, methods, computed, watch를 사용	data, props, methods, computed 등을 사용

결론

• Vue Instance는 애플리케이션을 위한 루트 객체로, 애플리케이션 전체의 상태를 관리하고 컴포넌트들을 포함하는 중심 역할을 합니다.
• Vue Component는 UI를 구성하는 독립적인 단위로, 각각의 컴포넌트는 자신만의 상태와 로직을 가질 수 있으며 재사용 가능합니다.

Vue 인스턴스는 애플리케이션의 시작점인 반면, Vue 컴포넌트는 UI를 구성하는 기본 블록으로 재사용성과 모듈화를 높이는 데 중요한 역할을 합니다. Vue 애플리케이션은 보통 루트 인스턴스에서 시작하고, 그 안에서 여러 개의 컴포넌트들을 사용하여 UI를 구성하게 됩니다.