[Vue.js] 생명주기(Life Cycle) 이해하기

공부하는 이유

Vue를 사용해서 개발할 때 여러 컴포넌트(Component)를 만들어서 사용하게 된다.

생성 주기에 따라 컴포넌트에서 해야 하는 일이 추가될 수 있기 때문에,
생명주기를 잘 알고 있어야 한다고 생각했다.

생명주기 (Life Cycle) 이해하기

Vue는 다음과 같은 생명주기를 가지고 있다.

출처 : https://kr.vuejs.org/v2/guide/instance.html

라이프 사이클은 크게
Create, Mount, Update. Destroy로 나눌 수 있다.

Create

Vue 인스턴스가 생성되고
이벤트 및 라이프 사이클이 초기화된다.
SSR 적용 시 서버 사이드에서도 실행 가능하다.

beforeCreate
인스턴스 생성 후 가장 먼저 실행되는 단계.
Vue 인스턴스의 data와 methods 속성이 정의되어있지 않은 상태다.
DOM에 접근할 수 없다.

이 단계가 끝나면 화면에 반응성을 주입한다.

created
data와 methods 속성이 정의된 상태이다.
따라서 data와 methods에 접근하는 로직을 구현해도 된다.

아직 DOM에 인스턴스가 부착되지는 않아서
이전 단계와 같이 DOM에 접근할 수 없다.

이 단계가 끝나면
el, template의 속성을 확인한다.
template 속성 내용을 render()로 변환한다.

Mount

이 단계부터는 서버 사이드에서 호출되지 않으므로 접근할 수 없다.

beforeMount
render() 함수가 호출되기 직전의 단계.
화면에 붙이기 전 실행할 코드를 넣을 수 있다.

이 단계가 끝나면
$el 생성 후 el 속성 값을 대입한다.
Dom에 인스턴스가 부착된다.

mounted
인스턴스가 화면에 부착되고 난 후 호출되는 단계.
템플릿 속성에 정의한 화면 요소에 접근할 수 있다.
child 컴포넌트가 있는 경우, child 컴포넌트의 mounted를 기다린 후에 실행된다.

돔에 인스턴스가 부착되자마자 호출되기 때문에
외부 라이브러리에 추가된 화면 요소들이 최종 HTML 코드로 변환되는 시점과는 다를 수 있다.

Update

인스턴스가 화면에 부착되고,
데이터가 변경하는 경우(컴포넌트를 다시 렌더링하는 경우) 해당 주기를 탄다.

beforeUpdate
인스턴스 값이 바뀌는 경우, 화면을 다시 그려야할 수도 있는데,
그리기 직전에 호출되는 단계이다.

watch 속성을 사용해서 값이 바뀐 인스턴스를 알아챌 수 있다.
변경 예정인 데이터 값을 이용해서 작업을 해야할 때 해당 단계를 사용한다.

updated
화면에 변경된 데이터를 업데이트 한 후 실행되는 단계.
데이터가 변경되고 화면 요소를 제어하는 것을 구현하고 싶을 때 사용되는 단계이다.

주의할 점은
이 단계에서 값을 변경하면 beforeUpdate와 updated 사이에서 무한 루프에 빠질 수 있다.
그래서 값을 변경하면 안된다.

Destroy

beforeDestroy
뷰 인스턴스가 소멸되기 직전에 호출되는 단계.
아직 인스턴스가 없어지지 않았기 때문에 접근 가능하다.

인스턴스가 사라지기 직전에 해야 하는 작업을 할 수 있다. (ex event listener, subscription 제거)

이 단계가 끝나면
컴포넌트, 인스턴스, 디렉티브 등 해제된다.

destroyed
뷰 인스턴스가 소멸되고 호출되는 단계.
정의한 모든 속성이 제거되고 하위에 선언했던 인스턴스들 역시 모두 소멸된다.

부모, 자식 컴포넌트 간의 생성 흐름

부모 created → 자식 created → 자식 mounted → 부모 mounted
부모가 자식을 품고 있는 형태