인스턴스와 라이프사이클

진성대·2023년 3월 29일
0

Vue.js

목록 보기
5/13

인스턴스?

  • 모든 Vue 앱은 createApp함수를 사용하여 새로운 앱 인스턴스를 생성하는 것으로 시작한ㄷ.
import { createApp } from 'vue'
import App from './App'

const app = createApp({

})

최상위 컴포넌트

  • createApp에 전달하는 객체는 사실 컴포넌트다. 모든 앱에는 다른 컴포넌트를 자식으로 포함시킬 수 있으며, 다른 컴포넌트를 포함 할 수 있는 최상위 컴포넌트가 필요하다.
import { createApp } from 'vue'
// 싱글 파일 컴포넌트에서 최상위 컴포넌트 앱을 가져옵니다.
import App from './App.vue'

const app = createApp(App)

컴포넌트 트리 구조

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

앱 마운트하기

  • 앱 인스턴스는 .mount() 메서드가 호출될 때까지 아무 것도 랜더링하지 않는다. "컨테이너"가 될 실제 DOM 엘리먼트 또는 셀렉터 문자열을 인자로 필요로 한다.
<div id="app"></div>
app.mount('#app')

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

.mount() 메서드는 반드시 앱의 환경설정 및 에셋(asset)이 모두 등록 완료된 후에 호출되어야 한다. 또한 에셋 등록 메서드와 달리 반환 값은 앱 인스턴스가 아닌 최상위 컴포넌트 인스턴스이다.


라이프 사이클 훅

  • 각 컴포넌트는 생성될 때 일련의 초기화 단계를 거친다. 예를 들어 데이터 관찰, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 뎅터 변경 시 DOM을 업데이트해야한다. 그 과정에서 라이프사이클 훅이라 불리는 함수도 실행하여, 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다.

EX) created 훅은 인스턴스가 생성된 후에 코드를 실행하는데 사용된다.

Vue.createApp({
  data() {
    return { count: 1}
  },
  created() {
    // this points to the vm instance
    console.log('count is: ' + this.count) // => count is 1"
  }
})

인스턴스 라이프사이클에는 mounted, updated, unmounted 과 같은 다른 훅도 존재한다. 모든 라이프사이클 훅에서는 Vue인스턴스를 가리키는 this컨텍스트와 함께 호출된다.

라이프사이클 다이어그램

profile
신입 개발자

0개의 댓글