실전 코드로 배우는 Vue.js

103

CHAPTER 03

컴포넌트 구성

더 이상 사용되지 않을 때 발생한다. 업데이팅 및 마운팅 페이즈와 비슷하게 컴포넌트는

모든 자식 요소가 언마운팅되고 나서야 자신을 언마운팅할 수 있다.

마운트

마운트

마운트

컴포넌트

A

자식

1

손자

1

1

2

3

그림

3-5

컴포넌트와 자식 요소의 마운트 순서 컴포넌트와 자식 요소의 마운트 순서

Vue

는 라이프사이클 페이즈가 전환되는 시점에 특정 이벤트를 걸어 컴포넌트 흐름을 원활하

게 제어할 수 있다. 이러한 이벤트를 라이프사이클 훅이라 부른다. 이어서

Vue

에서 사용하는

라이프사이클 훅을 차례로 알아보자.

3.3.1

setup

setup

은 컴포넌트 라이프사이클이 시작되기 전에 발생하는 첫 이벤트 훅이다. 이 훅은

Vue

가 컴포넌트를 인스턴스화하기 직전에 한 번 실행된다. 이 때는 아직 컴포넌트 인스턴스가

존재하지 않으므로

this

에

접근할 수 없다.

export default {

setup() {

console.log('setup hook')

console.log(this) // undefined

104

실전 코드로 배우는 Vue.js

}

}

NOTE ...