Vue.js로 프로젝트를 진행하던 중 백엔드 데이터를 axios통신으로 받아와서 화면을 구성하는 작업이 필요해서 라이프사이클에 대해 정리해 보기로 했다.
라이프사이클이란?
Vue 인스턴스가 생성되고,바뀌고,소멸될 때까지의 일련의 과정.
인스턴스 라이프사이클에서 호출되는 사용자 지정 로직은 라이프사이클 훅이라고 부른다.
이번 글에서는 크게 4가지, 세부적으로 8가지로 나눈다.
(라이프사이클 훅은 13가지가 있지만 동적 컴포넌트나 타입이 Function이 아닌 것들은 다음에 알아보기로 한다.)
1. Creation (생성)
2. Mounting (부착)
3. Updating (갱신)
4. unmounting (해제)
이 과정들을 제대로 알고 있어야 코드가 어느 시점에 실행이 되어야하는지 알 수 있다.
라이프사이클 다이어그램
출처 Vue 공식문서
1. beforeCreate
인스턴스가 초기화 된 직후 처음으로 실행됨 data,methods 설정 전이기 때문에 접근이 불가능하다.
컴포넌트가 DOM에 추가되기 전이라 DOM에 접근이 불가능함.
서버사이드에서 지원 가능.
2. created
인스턴스가 생성된 후 호출, data,computed,methods,watch 등 설정이 완료되어 속성에 접근이 가능하다. but 마운트가 안 됐으니 $el 속성은 사용 불가
3. beforeMount
여기부터 서버측 렌더링 중 호출 불가.
render 함수가 처음으로 호출되는 부분.
4. mounted
인스턴스가 마운트된 후에 호출된다.
vm.$el이 생성된다. -> 컴포넌트,탬플릿,렌더링된 돔에 접근 가능
mounted는 자식 컴포넌트가 마운트되었음을 보장하지 않기 때문에 전체 화면이 렌더링될 때까지 기다리려면 vm.$nextTick을 사용한다.
5. beforeUpdate
컴포넌트의 데이터가 변경돼 업데이트가 시작될 때 실행.
DOM이 재 렌더링되기 전에 실행
6. updated
가상 DOM이 렌더링된 후에 호출.
DOM이 업데이트 되므로 DOM의 종속적인 연산을 할 수 있다
mounted와 같은 이유로 vm.$nextTick을 사용
7. beforeUnmount
컴포넌트 인스턴스가 unmounted 되기 직전에 호출. 인스턴스는 여전히 완전하게 작동된다.
8. unmounted
컴포넌트 인스턴스가 unmounted된 후 호출된다. 컴포넌트 인스턴스의 모든 디렉티브가 바인딩 해제되고 모든 이벤트가 제거되고 하위 Vue 인스턴스도 unmounted된다.
주의사항
라이프사이클 훅은 자동으로 this가 인스턴스에 바인딩되어 있어 data,computed,methods 속성에 접근할 수있기때문에 라이프사이클 메소드를 정의할 때 화살표 함수(Arrow Function) 사용을 지양해야함!!!
-> 화살표 함수는 this를 가지지 않기 때문에 화살표 함수에서의 this는 다른 변수로 취급되거나 호출한 변수를 발견할 때까지 부모 스코프에서 해당 변수를 찾기 때문에 Uncaught TypeError: Cannot read property of undefined 또는 Uncaught TypeError: this.myMethod is not a function 오류가 발생한다.
(자바스크립트는 렉시컬 스코프를 따라서 함수를 선언한 시점에 상위 스코프가 결정된다.)
참고자료
뷰 공식문서
