[vue3 공식문서 번역]Essentials.1.Creating an Appliction

어플리케이션 인스턴스

모든 뷰 애플리케이션은 createApp 함수로 애플리케이션 인스턴스를 만드는 것으로 시작한다.

import { createApp } from 'vue'

const app = createApp({
  /* root component options */
})

루트 컴포넌트

createApp으로 넘긴 객체는 사실상 컴포넌트이다. 모든 앱은 다른 컴포넌트들을 자식으로 담을 수 있도록 "루트 컴포넌트"를 필요로 한다.

 

Single-File Components를 사용중이라면, 일반적으로 루트 컴포넌트를 다른 파일에서 import 한다.

import {create App } from 'vue'
// import the root component App from a single-file component.
import App from './App.vue'

const app = createApp(App)

이 가이드의 많은 예제는 하나의 컴포넌트만 필요한 반면, 대부분의 실제 애플리케이션들은 중첩되고 재사용 가능한 컴포넌트들의 트리 구조로 구성되어 있다. 예를 들어, Todo 애플리케이션의 컴포넌트 트리는 다음과 같다:

App (root component)
├─ TodoList
│  └─ TodoItem
│     ├─ TodoDeleteButton
│     └─ TodoEditButton
└─ TodoFooter
   ├─ TodoClearButton
   └─ TodoStatistics

이 가이드의 뒷부분에서 여러개의 컴포넌트를 구성하고 정의하는 방법을 논의할 것이다. 그전에, single component 내부에서 일어나는 일에 초점을 맞춘다.

Mounting the App

애플리케이션 인스턴스는 .mount() 메소드가 호출되기 전까지 아무것도 렌더링하지 않는다. 실제 DOM element나 selector 문자열 둘 중 하나의 컨테이너 아규먼트를 기대한다.

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

 

app.mount('#app')

앱의 루트 컴포넌트의 내용은 컨테이너 엘리먼트 안에서 렌더링될 수 있고 그리고 자산 등록은 끝난다. 또한, 자산 등록 메소드와는 다른 이것의 리턴 벨류는 애플리케이션 인스턴스가 아닌 루트 컴포넌트 인스턴스다. 

 

In-DOM 루트 컴포넌트 템플릿

빌드스텝 없이 뷰를 사용할 때, 우리는 mount 컨테이너 안에 직접적으로 루트 컴포넌트의 템플릿을 짤 수 있다.

<div id="app">
  <button @click="count++">{{ count }}</button>
</div>

import { createApp } from 'vue'

const app = createApp({
  data() {
    return {
      count: 0
    }
  }
})

app.mount('#app')

뷰는 루트 컴포넌트가 템플릿 옵션을 아직 가지지 않았다면 컨테이너의 innerHTML을 템플릿으로서 자동적으로 사용한다.

App 설정

모든 파생 컴포넌트들로부터 나오는 에러들을 잡는 앱 레벨의 에러 핸들러를 정의하는 것과 같이, 애플리케이션 인스턴스는 몇개의 앱 레벨 옵션들을 정의하기 위한 .config 객체를 제공한다.

app.config.errorHandler = (err) => {
  /* handle error */
}

.애플리케이션 인스턴스는 app-scopred 자산( 앱 전역에서 사용되는 자산)을 등록하기위한 몇개의 메소드도 제공한다. 예를들면 컴포넌트를 등록할 때는 :

app.component('TodoDeleteButton', TodoDeleteButton)

이렇게 하면, 우리 앱의 어디에서든지 TodoDeleteButton 을 사용할 수 있게 해준다. 가이드의 뒷부분에서 자산의 다른 타입과 컴포넌트를 위한 등록을 다룰 것이다. 또한 API 레퍼런스에서 애플리케이션 인스턴스 API의 모든 리스트도 둘러볼 수 있다.

 

앱을 마운팅하기 전에 모든 앱 설정들을 적용하라!

다중 애플리케이션 인스턴스

같은 페이지에 싱글 애플리케이션 인스턴스 제한은 없다. createApp API는 전역 자산과 그들만의 설정을 각각 가지는 같은 페이지에 존재하는 여러개의 뷰 애플리케이션을 허락한다.

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

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

 만약 서버 렌더링 HTML을 강화시키기 위해 뷰를 사용하고, 그리고 오직 뷰가 큰 페이지의 특정 부분만 컨트롤하기 위해 필요하다면, 전체 페이지에 뷰 애플리케이션 인스턴스를 마운팅 하는걸 피하라. 대신, 여러개의 작은 애플리케이션 인스턴스를 만들고, 그 인스턴스들이 필요한 부분에 mount 시켜라.