[vue3] vue 앱 만들기

앱 인스턴스

모든 Vue 앱은 createApp 함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작함.

import { createApp } from 'vue'

const app = createApp({
  /* 최상위 컴포넌트 옵션 */
})

최상위 컴포넌트

createApp 에 전달하는 객체는 사실 컴포넌트임.
모든 앱에서 다른 컴포넌트 자식으로 포함할 수 있는 "최상위 컴포넌트"가 필요함.

싱글 파일 컴포넌트를 사용하는 경우 일반적으로 다른 파일에서 루트 컴포넌트를 가져옴.

import { createApp } from 'vue'
// 싱글 파일 컴포넌트에서 최상위 컴포넌트 앱을 가져옵니다.
import App from './App.vue'

const app = createApp(App)

대부분의 예제에선 단일 컴포넌트만 필요하지만 대부분의 실제 앱은 중첩되고 재사용 가능한 컴포넌트 트리고 구성됨. 예를 들어 Todo 앱의 컴포넌트 트리는 다음과 같음.

App (최상위 컴포넌트)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

앱 마운트하기

앱 인스턴스는 .mount() 메서드가 호출될 때까지 아무 것도 렌더링하지 않음.
'컨테이너'가 될 실제 DOM 엘리먼트 또는 셀렉터 문자열을 인자로 필요함.

<div id="app"></div>

app.mount('#app')

앱의 최상위 컴포넌트 컨텐츠는 컨테이너 엘리먼트 내에서 랜더링 됨.
컨테이너 엘리먼트 자체는 앱의 일부로 간주되지 않음

.mount() 메서드는 반드시 앱의 환경설정 및 asset이 모두 등록 완료된 후 호출하여야함.
반환 값은 앱 인스턴스가 아닌 최상위 컴포넌트 인스턴스임.

앱 환경설정

앱 인스턴스는 몇 가지 앱 레벨의 옵션을 구성할 수 있는 .config 객체를 노출함.
예를 들어 모든 자식 컴포넌트에서 에러를 캡처하는 앱 레벨의 에러 핸들러를 정의함.

app.config.errorHandler = (err) => {
	/* 에러 처리 */
}

앱 인스턴스는 앱 범위의 에셋을 등록하기 위한 몇 가지 방법도 제공함.

app.component('TodoDeleteButton', TodoDeleteButton)

이렇게 하면 TodoDeleteButton을 앱 어디에서나 사용할 수 있음.

멀티 앱 인스턴스

앱 인스턴스는 동일한 페이지 내 하나로 제한하지 않음.
createApp API를 사용하면 여러 Vue 앱이 동일한 페이지에 공존할 수 있으며, 각각은 구성 및 전역 자산에 대한 고유한 범위를 가짐.

const app1 = createApp({
  /* ... */
})
app1.mount('#container-1')

const app2 = createApp({
  /* ... */
})
app2.mount('#container-2')

페이지 전체를 단일 Vue 앱 인스턴스로 마운트하지 말고, 여러 개의 작은 앱 인스턴스를 만들고 담당해야 하는 엘리먼트에 마운트 해야함.