[Vue2] vue2.0 인스턴스 라이프 사이클(생명주기)
라이프 사이클
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()에 작성하여 로딩 타이밍을 분배해놓으면, 사용자는 속도가 향상됬다고 느낄 수 있다.
라이프 사이클 실습
<script> 부분에 다음과 같이 모든 단계들을 작성해본다. 각 단계들은 data()와 같이 함수 형태로 작성한다.
1. Creation
beforeCreate, created 함수 내에 각각 'console.log('생성 전', this.name)', 'console.log('생성 후', this.name)' 라고 적고 콘솔로그 창을 확인해보자. beforeCreate에서는 아직까지 data가 불려오지 않았고, created에서는 this.name가 불려져 온 것을 볼 수 있다.
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을 누르면 channy가 channy + "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 공식문서 - 인스턴스 : 라이프사이클 다이어그램