1. 라이프 사이클
Vue.js에서 라이프 사이클이란 하나의 인스턴스가 생성되고, 마운트 및 업데이트 되고, 사라지는 일련의 과정을 말한다. 그리고 Vue.js에서는 이러한 과정을 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed로 나누어 구분한다.
각 과정에 대해서 상세히 알아야겠지만, 기초 단계라 정확히 파악하기 보다는 전체적인 흐름만 파악하고 실제 프로젝트에서 이러한 과정들을 활용하면서 익숙해지고자 한다.
각 과정의 의미
1. creation(beforeCreate, created)
이 단계는 가장 처음 실행되는 단계로, 컴포넌트들이 DOM에 추가되기 전이다. 클라이언트와 서버의 렌더링 전에 처리해야할 일이 있다면 이 단계에서 미리 처리해놓으면 된다고 한다.
2. Mounting(beforeMount, mounted)
DOM을 삽입하는 단계이며, 초기 렌더링이 되기 전에 컴포넌트에 접근할 수 있는 단계이다. 하지만 만약 초기 데이터를 업데이트 해줘야하는 상황이 있다면 대체로 creation 단계에서 처리해주는 게 좋다고 한다.
3. Updating(beforeUpdate, updated)
컴포넌트의 속성들이나 데이터가 변하면 실행된다. beforeUpdate는 데이터가 변해서 업데이트 사이클이 시작될 때 실행되고, updated는 데이터가 변한 후 렌더링이 일어난 이후에 실행된다.
4. Destruction(beforeDestroy, destroyed)
인스턴스가 제거되기 직전(beforeDestroy), 제거되고나서(destroyed) 실행된다. 이 단계에서는 메모리 로스를 방지하기 위해서 이벤트를 제거한다거나, 데이터값을 초기화하는 작업 등을 진행한다.
라이프 사이클에 따라 프로그램을 적절히 나눠놓으면, 사용자가 느끼는 로딩 속도를 향상시킬 수 있다. 화면에서 제일 먼저 보여줘야 하는 부분은 created() 부분에 정의해서 서버에서 미리 받아오도록 하고, 로딩 후에 삽입되어도 되는 데이터나 HTML 객체 부분은 mounted()에 작성하여 로딩 타이밍을 분배해놓으면, 사용자는 속도가 향상됬다고 느낄 수 있다.
아래 예제 실습을 통해 대략적인 실행 타이밍을 알아본다.
2. 라이프 사이클 실습
<script> 부분에 다음과 같이 모든 단계들을 작성해본다. 각 단계들은 data()와 같이 함수 형태로 작성한다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<script>
data() {
return {
id : 'charlie'
}
},
beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
},
methods: {
updateId() {
this.id = 'updated!'
}
}
</script>
|
cs |
1. Creation
beforeCreate, created 함수 내에 각각 'console.log('생성 전', this.id)', 'console.log('생성 후', this.id)' 라고 적고 콘솔로그 창을 확인해보자. beforeCreate에서는 아직까지 data가 불려오지 않았고, created에서는 this.id가 불려져 온 것을 볼 수 있다.
2. Mounting
이번엔 beforeMount, mounted 부분에 순서대로 "alert('beforeMount'), alert('mounted')"를 입력해보자. beforeMount 단계에서는 app 인스턴스에 아무런 DOM이 mount 되지 않았다. 그러나 mounted 에서는 app 인스턴스에 DOM이 mount 된 것을 확인할 수 있다.
3. Updating
이번엔 각각에 "alert('beforeUpdate'), alert('updated')" 를 입력해보자. 아래 그림과 같이 data.id = "charlie"인 상태가 표시되어 있고, button을 누르면 charlie가 "updated!"가 되도록 methods를 지정하였다.
버튼을 누르면 곧바로 'beforeUpdate' 경고창이 팝업으로 뜨게 된다. 이 때는 update 전이므로 charlie 라는 문자열이 바뀌지 않는다. 그 다음 updated 경고창이 뜨면, 그때는 update 된 상태이므로 문자열이 updated!로 바뀐 것을 확인할 수 있다.
4. Destruction
각각의 과정에 alert('beforeDestroy'), alert('destroyed') 라고 작성해보자. 기본적인 기작은 Updating 단계와 같다. 즉 컴포넌트(인스턴스)가 제거되기 전, 제거된 후 작성된 구문이 발동된다. 컴포넌트의 제거를 모사하기 위해서, Home router에서 About router로 이동하면 된다.
참조
1) [유튜브] 코지코더 - '뷰js 2 기초익히기 시리즈'
www.youtube.com/channel/UCI4tTBupvhMX1aWDSm-HAXw
2) [문서] Vue.js 공식문서 - 인스턴스 : 라이프사이클 다이어그램
3) [도서] Vue.js 프로젝트 투입 일주일 전 - 고승원 지음
'Programming-[Frontend] > Vue.js' 카테고리의 다른 글
| Vue.js / 기초 / 11. 서버 데이터 바인딩 하기 (w/postman Mock Server) (0) | 2021.07.23 |
|---|---|
| Vue.js / 기초 / 9. Slot의 필요성과 사용 방법 (0) | 2021.01.27 |
| Vue.js / 기초 / 8. Emit으로 자식 -> 부모 컴포넌트에 데이터 보내기 (0) | 2021.01.26 |
| Vue.js / 기초 / 7. props로 부모 -> 자식 컴포넌트에 데이터 보내기 (0) | 2021.01.26 |
| Vue.js / 기초 / 6. 파일, 컴포넌트 및 router 구조 (2) | 2021.01.25 |
