인스턴스와 라이프사이클

Vue.js의 최신의 3버전의 문법을 본격적으로 공부해보도록 합시다. 이번에는 어플리케이션 & 컴포넌트 인스턴스와 라이프사이클이라는 개념에 대해 알아봅니다.

Vue.js의 공식 문서를 참고하였으니 참고 바랍니다.

1. 어플리케이션 인스턴스

모든 Vue 어플리케이션은 createApp 함수를 사용하여 새로운 어플리케이션 인스턴스를 생성하여 시작합니다.

어플리케이션 인스턴스에 의해 노출된 대부분의 메소드들은 동일한 인스턴스를 반환하여 연결(chaining)을 허용합니다. 즉, 쉽게 말해 메소드 체이닝을 허용한다는 의미입니다.

2. 최상위(Root) 컴포넌트

createApp에 전달된 옵션은 루트 컴포넌트를 구성하는데 사용됩니다. 이 컴포넌트는 어플리케이션을 mount할 때, 렌더링의 시작점으로 사용됩니다.

즉, 다시 말해 지금까지 만들어 사용한 App.vue라는 파일을 루트 컴포넌트라고 보시면 됩니다. App.vue 파일이 렌더링의 시작점이며 여기에 .vue라는 확장자의 컴포넌트들을 추가적으로 연결하여 사용하는 것입니다.

const RootComponent = { /* options */ }
const app = Vue.createApp(RootComponent)
const vm = app.mount('#app')

3. 라이프사이클 훅

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

예를 들어, 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 컨텍스트와 함께 호출됩니다.

공식 문서에서 제공하는 라이프사이클 다이어그램을 참고하시면 이해에 큰 도움이 되실 겁니다.

이중에서 가장 중요한 라이프사이클 훅은 첫째로 created, 그 다음으로는 mounted가 중요합니다. created 컴포넌트가 연결이 된 상태에서 가장 빠르게 만날 수 있는 훅이며, mounted는 실제로 화면에 내용이 그려진 직후에 확인할 수 있는 라이프사이클이기 때문에 두 가지가 압도적으로 많이 사용됩니다.

4. 코드 예시

<template>
  <h1>{{ count }}</h1>
</template>

<script>
export default {
  data() {
    return {
      count: 2
    }
  },
  beforeCreate() {
      console.log('Before Create!', this.count) // 값: Before Create! undefined
      // 인스턴스가 생성되기 전이므로 this.count 값에 undefined가 출력
  },
  created() {
      console.log('Created!', this.count) // 값: Created! 2
  },
  beforeMount() {
      console.log('Before Mount!') // 값: Before Mount!
      console.log(document.querySelector('h1')) // 값: null
      // beforeMount()는 HTML과 연결되기 전 상태이므로 null값이 출력
  },
  mounted() {
      console.log('Mounted!') // 값: Mounted!
      console.log(document.querySelector('h1')) // 값: <h1>2</h1>
  }
}
</script>