라이플사이클 다이어그램

라이플사이클 이란 ?

어떤 vue 인스턴스나 컴포넌트가 생성될 때, 미리 정의된 몇 단계의 과정을 거치게 되는데 이를 바로 라이플사이클이라고 합니다.

즉, vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 라이프사이클이라고 합니다.

라이플사이클의 4단계

공식문서에서 설명하기로,
vue 인스턴스는 크게 Creation(생성)되고, Mount(돔에 부착)되고, Update(업데이트)되고, Destroy(사라지는) 4단계의 과정을 거치게 됩니다.

그리고 이 각각의 단계에서 vue는 Hook 을 사용할 수 있도록 API 를 제공합니다.

자주사용하는 Hook 의 종류로는 beforeCreate, created, beforeMount, mounted, beforeUpdate, updated, beforeDestroy, destroyed가 있습니다.

그럼 각각의 단계와 그 단계에서 사용하는 hook 에 대해 알아보겠습니다.

Creation : 컴포넌트 초기화 단계

이 단계는 컴포넌트가 돔에 추가되기 전 단계입니다.
따라서 이 단계에서 실행되는 hook 들이 라이프사이클 중에서 가장 처음 실행되며, 서버렌더링에서도 지원되는 hook 입니다.

따라서 클라이언트 단과 서버단 렌더링 모두에서 처리해야할 일이 있으면 이 단계에서 하면됩니다.

beforeCreate:모든 hook 중 가장 먼저 실행되는 hook 입니다. 컴포넌트가 dom 에 추가되기 전이므로 this.$el 에 접근할 수없으며 당연히 data 나 events, method 에 접근할 수 없습니다.

created: 이제 data 와 event 가 활성화되어 접근이 가능합니다. 그러나 템플릿과 virtual dom 은 마운트나 렌더링이 되지않아 접근할 수 없습니다.
보통 해당 컴포넌트에서 사용할 data 를 fetch 해서 세팅하는 경우, 이벤트 리스너를 선언하는 경우에 많이 사용합니다.

Mount : Dom 삽입 단계

이 단계에서는 초기 렌더링 직전 컴포넌트에 직접 접근할 수 있습니다. 서버렌더링에서는 지원하지 않습니다.

초기 렌더링 직전 돔을 변경하고 싶을때 이 단계를 활용할 수 있습니다.

beforeMount: 첫 렌더링이 일어나기 직전에 실행됩니다. 대부분의 경우엔 사용하지 않습니다.

mounted : 컴포넌트, 템플릿, 렌더링된 돔에 모두 접근할 수 있습니다.
mounted 훅에서 주의해야할 점은, 부모와 자식관계의 컴포넌트에선 오히려 자식 mounted 훅 실행 후 부모의 mounted 훅이 실행된다는 점입니다.
그러나 부모의 mounted 훅이 실행될때 모든 자식 컴포넌트가 마운트 된 상태를 보장하진 않습니다. ( 비동기적으로 일어나기 때문 )

이때는 아래외같이 부모 컴포넌트 안에서 this.$nextTick 을 사용합니다.

mounted(){
	this.$nextTick(function(){
    	// 모든 화면이 렌더링 된 후 실행합니다.
    })
}

• 제가 프로젝트에서 mounted 단계를 사용했던 예시엔 this.$refs 에 접근하고싶을때가 있습니다.( refs 가 렌더링 된 이후에 정의되기 때문에 )

Update : Diff 및 재 렌더링 단계

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 재 렌더링이 일어나면 실행되는 단계입니다.

beforeUpdate: 이 hook은 컴포넌트의 데이터가 변해서 업데이트 사이클이 시작되기 직전 실행됩니다.

updated: 컴포넌트의 데이터가 변해서 재 렌더링이 일어난 후에 실행됩니다. 돔이 업데이트 완료된 상태라 돔 종속적인 연산을 할 수 있는데, 주의할 점은 여기에서 상태를 변경하면 무한루프에 빠질 수 있습니다.

Destruction : 해체 단계

beforeDestroy: 뷰 인스턴스가 해체되기 직전에 호출되는 hook 입니다. 이벤트 리스너를 제거하거나 reactive subscription 을 제거하고자 할 떄 많이 사용합니다.

destroyed: 뷰 인스턴스가 제거된 후 호출되는 hook 입니다.