[Udemy Vue 완벽가이드 Section2] 14. Vue앱 인스턴스 생성 및 연결하기

Vue기능을 사용할때 가장 먼저 해야할 일은, HTML코드와 Vue를 연결하는 일. → HTML코드 중, '어떤 부분'을 Vue가 관리해야하는지 Vue가 인식하도록 한다. Vue로 제어할 수 있는 부분에 대해서만 Vue를 사용할 수 있기 때문.

 

 

1. 먼저 할 일은 'Vue 앱 생성하기'.

- Vue앱으로 HTML 코드를 조정하려면 가장 먼저 거쳐야하는 단계.

- index.html 파일에서 CDN으로 Vue를 불러왔기 때문에, 전역적으로 사용 가능한 객체 : Vue

- Vue 객체에서 createApp을 불러올 수 있다. 이름에서도 알 수 있듯이 Vue앱을 생성한다.

- createApp함수를 사용하여 새로운 '앱 인스턴스'를 생성!

**기존에 Vue 2.xx버전에서는 Vue 생성자 함수를 이용하여 앱 인스턴스를 생성하였다.( new Vue() )

Vue 3버전에서는 createApp함수를 이용한다.

 

참고 : 인스턴스에 대해 간단한 설명! ⬇︎

객체지향 Class 문법

 

const app = Vue.createApp(); //Vue앱 생성

위와 같이, Vue앱을 변수 또는 상수(위의 예시에서는 app이라는 상수)에 저장할 수 있다. (기본 JavaScript기능으로, Vue와 상관 없다.)

 

createApp에 앱을 구성할 때 사용할 수 있는 객체를 전달. 이 앱의 여러 옵션을 구성할 수 있다.

** 우리가 createApp에 전달하는 객체는 사실 '컴포넌트'이다. 

Vue.createApp({
 //Vue가 해당 'data'이름 그대로 검색하기 때문에'data'라는 이름은 변경불가능, 반드시 'data'여야한다.
 data(){ //data: function()과 동일. data프로퍼티에 저장된 값이 함수라는 의미. 모던JS에서 사용하는 methods shorthand버전.
  return { //data프로퍼티는 항상 객체를 반환. 이 객체는 키-값 쌍을 설정할 수 있다.
    courseGoal: 123, //값은 boolean, number, array 등 어떤것도 가능!
    //data에서 반환하는 객체의 어떤 부분이든 Vue가 조정하는 HTML코드에서 사용가능하다.
  }
 },
 methods: {}
})

 

 

** createApp API에 관하여

• 타입

function createApp(rootComponent: Component, rootProps?: object): App

• 세부 사항:
  • 첫 번째 인자는 루트 컴포넌트(최상위 컴포넌트). 선택적인 두 번째 인자는 루트 컴포넌트에 전달할 props.
  • 모든 앱에는 다른 컴포넌트를 자식으로 포함할 수 있는 '최상위 컴포넌트'가 필요하다.
  • 싱글 파일 컴포넌트(SFC)를 사용하는 경우, 일반적으로 다른 파일에서 루트 컴포넌트(ex:두번째 예제)를 가져온다.
• 예제:
  • 루트 컴포넌트를 직접 서술하는 방식(inline)으로 사용하는 경우:

import { createApp } from 'vue'
const app = createApp({
 /* 루트 컴포넌트 옵션 */
})

 

• 컴포넌트 불러오기(import)로 사용하는 경우:

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

const app = createApp(App);

 

 

 

2. HTML 코드 중, 어떤 부분을 Vue앱이 조정할지 설정

**중요: Vue로 HTML요소를 제어하는 경우, 해당 요소의 자식 요소 또한 제어가능!

app.mount();

mount메서드를 호출하여 해당 작업을 실행.

mount: createApp을 통해 생성한 app객체의 메서드

 

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

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

app.mount('#app')

- 앱의 최상위 컴포넌트 컨텐츠(루트 컴포넌트)는 컨테이너 엘리먼트(실제 DOM 엘리먼트) 내에서 렌더링된다.

- 컨테이너 엘리먼트 자체는 앱의 일부로 간주되지 않는다. (즉, 위의 <div id="app"></div>이 div 엘리먼트는 앱의 일부로 간주되지 않는다는 뜻.)

 

CSS 선택자

- 제어하고자 하는 HTML 코드 내의 DOM 요소를 고유하게 식별한다.

- 고유한 선택자를 찾아야하므로 대개 id를 사용. id는 페이지의 고유한 값이므로 고유한 선택자로 쓰기에 적합.

 

 

app.js파일을 저장하면 HTML-Vue가 연결상태가 된다. 그러면 Vue기능을 이용해 조정 섹션과 상호작용 할 수 있다.

 

 

 

** 출처: 모든 내용은 Udemy Vue-완벽가이드 강의, Vue공식문서를 기반으로 작성하였습니다.

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