[ Vue.js 3 공식 문서 ] 2. Essentials - Creating an Application

 

[ Reference ] 

https://vuejs.org/guide/essentials/application.html

Creating a Vue Application | Vue.js

 

[ 2-1 ] Creating a Vue Application

 

The application instance

  모든 Vue 어플리케이션은 createApp 함수를 이용해서 application instance 를 만들어내야 한다. 

 

The Root Component

  createApp 함수로 넘기는 객체들은 사실상 컴포넌트들이다. 각 app 은 Root Component 를 필요로 한다. 그리고 이 Root Component 는 다른 컴포넌트들을 Children 으로 갖는다. (*첨언. 이 Root Component 가 흔히 말하는 부모 컴포넌트를 말하는 것 같고, Children 은 자식 컴포넌트를 의미하는 것 같다) 

 

  만약 SFC 를 사용한다고 하면 우리는 일반적으로 Root Compionent 를 다른 파일에서 import 해야 한다. 이 Root Component 를 App 이라고 했을 때 application instance 로 만들어내기 위해서는 다음과 같은 로직이 필요할 것이다.

 

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

const app = createApp(App)

  
Mounting the app

  application instance 는 .mount 돼야지 렌더링이 된다. 

 

app.mount('#app')

 

   만약에 위의 코드가 마운트 된다고 하면 이 파일의 최상위 파일은 Rerendering(리렌더링) 될  것이다. 여기서 주의할 점은 반환되는 값은 이 어플리케이션의 인스턴스가 아니라 Root Component의 인스턴스다. 

 

App Configurations

   Application 인스턴스는 .config 라는 object 를 반환하고 여기에서 몇 가지 설정을 해줄 수 있다. 공식문서에서는 아래의 예시들을 제시한다. 첫 번째는 에러를 핸들 하기 위한 것이고, 두 번째는 컴포넌트를 전역으로 사용해주기 위한 방법이다.  \

 

app.config.errorHandler = (err) => {
  // 에러를 해결하기 위한 로직
}

app.component('컴포넌트_사용명', 컴포넌트_명')

 

  이것 이외에도 다양한 object 들을 반환하는데 그에 대한 것들은 아래의 링크에서 확인해보면 될 것 같다.

 

https://vuejs.org/api/application.html

Application API | Vue.js

 

Multiple application instances

 

  application 인스턴스는 같은 페이지에 한 가지만 있어야 하는 것이 아니다. 만약, Vue 를 이용해서 서버에서 렌더링 되는(*첨언, SSR 을 말하는 것 같다) HTML 을 개선하고 Vue 를 페이지에서 특정 부분을 제어하는 것만을 목표로 갖는다면, 전체 페이지에서 단일 Vue 어플리케이션 인스턴스를 마운트하는 것을 피해야 한다. 대신에 여러 작은 appication instance 를 만들어서 담당하는 요소에 Mount 하면 된다.