서론
오늘 공부하게 될 내용은 Vue의 생명주기와 vue.js에서 사용할 수 있는 callback함수인 nextTick에 대해 이야기하려고 한다.
본론
생명주기(life cycle)란?
생명주기란 인스턴스 상태에 따라서 호출할 수 있는 속성들을 이야기 한다. 그리고 그 속성마다 개발자가 추가한 커스텀 로직을 라이프 사이클 훅(life cycle hook)이라고 한다.
VueJS의 생명주기는 크게 Create, Mount, Update, Destory로 나눌 수 있다.
Create
- VueJS 라이프 사이클들 중 가장 먼저 실행
- 컴포넌트가 DOM에 추가되기 전이기 때문에 DOM에 접근하거나 this.$el을 사용할 수 없음
- DOM에 컴포넌트가 추가되기 전에 호출되기 때문에 서버 사이드 렌더링에서도 지원이 되는 훅이다.
beforeCreate
- VueJS의 라이프 사이클들 중 가장 먼저 실행
- data와 이벤트 등이 설정되기 전에 호출되는 라이프 사이클 훅
Created
- data, computed, methods, watch 등과 같은 옵션 설정이 완료된 시점이며, 위의 것들을 사용할 수 있다.
- 하지만, DOM에 컴포넌트가 mount되지 않았기 때문에 $el은 사용할 수 없다.
$el옵션이란?
마운팅 포인트를 결정할 수 있는 Vue 컴포넌트에서 제공하는 옵션이다.new Vue({ el : '#app', data : {}, ...만약 template옵션이나 render함수가 없다면 지정된 DOM 요소 내부 내용이 렌더링 된다. 또, el옵션을 명시하지 않으면 컴파일이 중단된다. el옵션을 사용하는 대신 $mount옵션을 사용 할 수도 있다. $mount 옵션을 사용하면 마운트 시점을 늦출 수 있다.
서버 사이드 렌더링이란?
클라이언트가 서버에 매번 데이터를 요청하여 서버에서 처리하는 방식으로, 클라이언트의 요청이 들어올 때마다 매번 새로운 화면을 만들어서 제공한다.
여기까지가 Create의 생명주기이다. 다음은 Mount이다.
Mount
- 컴포넌트가 DOM에 추가될 때 실행되는 라이프 사이클 훅.
- 서버 사이드 렌더링을 지원하지 않는다.
- 렌더링이 될 때 DOM을 변경하고 싶을때 사용.
- 컴포넌트 초기에 data를 세팅해야한다면 create를 사용
beforeMount
- 컴포넌트가 DOM에 추가되기 전에 실행
- 서버 사이드 렌더링 지원 x
Mounted
- 컴포넌트가 DOM에 추가 된 후 호출되는 라이프 사이클 훅.
- 서버 사이드 렌더링 지원 x
- $el을 사용해서 DOM에 접근 가능
- mounted 훅이 호출되었다고 모든 컴포넌트가 마운트 되었다고 보장할 수 없다.
- 전체가 렌더링이 보장된 상태에서 작업을 하기 위해서는 $nextTick을 사용
- 자신 컴포넌트의 mounted 훅이 부모 컴포넌트의 mounted 훅 보다 먼저 실행된다. (create는 부모 > 자식 순으로 호출 / mounted는 자식 > 부모 순으로 호출 , 부모 컴포넌트는 자식 컴포넌트가 모두 DOM에 추가 된 후에야 mounted 훅 실행)
nextTick이란?
Update
- 컴포넌트에서 사용되는 속성들의 변경되는 등... 컴포넌트 재 랜더링이 실행되었을 때 실행
- 컴포넌트가 재 랜더링 될 때, 변경 된 값으로 작업을 해야할 때 유용하게 사용
- 서버 사이드 렌더링 지원 x
beforeUpdate
- DOM이 재 렌더링 되기 직전에 호출
- 업데이트 된 값들을 가지고 있는 상태이기 때문에, 업데이트 된 값으로 다른 값 업데이트가 가능
- 여기서 값이 변경되더라도 다시 재호출하지 않기 때문에 무한 루프에 빠질 염려가 없다.
updated
- DOM이 재 랜더링 된 후 호출.
- DOM 업데이트 이후 호출되는 훅이기 때문에 변경 된 후의 DOM을 이용해야 하는 처리를 할 때 유용하다.
- mounted와 마찬가지로 재 랜더링이 끝났다는 것이 보장된 상태에서 작업하기 위해서는 $nextTick 함수를 사용
- beforeUpdate와 다르게 updated 훅 안에서 data를 수정하면 update훅이 바로 호출되기 때문에 무한루프에 빠질 수 있다.
Destory
- 컴포넌트가 제거 될 때 실행되는 라이프 사이클 훅
beforeDestroy
- 컴포넌트가 제거되기 이전에 호출됨.
- 이벤트 리스너를 해제하거나, 컴포넌트에서 동작으로 할당 받은 지원들을 해제해야 할 때 유용
- 서버 사이드 랜더링 x
destroyed
- 컴포넌트가 제거 된 후 호출됨.
- 컴포넌트의 모든 이벤트 리스너는 사라지고 바인딩이 해제되며, 하위 컴포넌트들 모두 제거된다.
- 서버 사이드 렌더링 x
nextTick
갱신될 UI에 대해서 간헐적으로 DOM을 못찾는 상황가 비슷하다. 이런 현상이 일어나는 이유는 Javascript의 비동기로 처리되는 특성 때문이다.
참고
https://hyeooona825.tistory.com/40
https://vuejs-kr.github.io/jekyll/update/2017/01/19/vuejs-nexttick-example/
el옵션 : https://handhand.tistory.com/251
