Vue.js #1 Vue.js Intro & 라이프 사이클

Vue.js란 무엇인가?

Vue.js는 사용자 인터페이스를 만들기 위한 프로그레시브 프레임워크이다. Vue.js의 핵심 라이브러리는 뷰 레이어만 초점을 맞추어 다른 라이브러리나 기존 프로젝트와의 통합이 매우 쉽다.  Vue.js는 현대적 도구 및 지원하는 라이브러리와 함께 사용한다면 정교한 단일 페이지 응용프로그램을 완벽하게 지원한다. 

Vue.js 의 주요 특징을 정리해 보면 다음과 같다.

1. 가상 DOM(Virtual DOM): Vue.js에서는 React.js, Ember.js 프레임워크와 유사하게 가상 DOM을 사용한다. 가상 DOM은 원본 HTML DOM을 표현하는 메모리 상의 가벼운 DOM 트리로, 원본 DOM에 영향을 미치지 않고 업데이트를 할 수 있다.
2. 컴포넌트(Components): Vue.js는 어플리케이션에서 재사용할 수 있는 엘리먼트들을 컴포넌트 단위로 만들 수 있다.
3. 템플릿(Templates): Vue.js는 Vue 인스턴스 데이터와 DOM에 접근할 수 있는 HTML 기반의 템플릿을 제공한다.
4. 라우팅(Routing): 페이지의 전환은 vue-router를 이용한다.
5. 저용량(Light weight): Vue.js는 다른 프레임워크와 비교해 저용량이다.

개인적으로 나는 프로젝트에 Vue.js를 적용해 본 적이 몇 번 있었는데, 처음 배우기에 어렵지 않은 프레임워크라는 생각을 했던 것 같다. 다만 그럼에도 불구하고 참 많은 삽질을 했었던 기억이 있는데, 원인이 Vue.js 라이프사이클에 대한 이해가 부족했기 때문인 적이 다수였다. 그래서 Vue.js 첫 포스팅은 라이프 사이클에 대해서 다루어 보려고 한다. 참고로 오늘 설명은 Vue 2 버전에 대한 것이고, 2020년 중순 경 Vue 3 버전이 나온다고 하니 그 때 또 새로운 내용을 업데이트 하고자 한다.

---

Vue.js 라이프 사이클

Vue Lifecycle hook은 사용중인 라이브러리가 어떤 순서로 동작하는지를 알려주는 역할을 한다. 훅을 이용해 컴포넌트가 언제 생성되고, 언제 DOM에 추가되며, 언제 업데이트되고 언제 사라지는지 알 수가 있다. 아래의 다이어그램을 통해 Vue.js의 전체 라이프사이클을 나타내는 그림이다.

1. Creation : 컴포넌트 초기화 단계

Create 훅은 컴포넌트가 DOM에 추가되기 전에 실행되는 단계이다. 클라이언트와 서버가 렌더링 단계 전에 컴포넌트에 설정해야 할 것들이 있을 때 사용하는 단계이다. 다른 훅과는 다르게, Create 훅은 서버 사이드 렌더링에서도 지원된다. 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다.

1. beforeCreate
컴포넌트 초기화 단계 중 가장 처음으로 실행되는 훅이다. 이 훅에서는 컴포넌트의 data를 관찰하고, 이벤트를 초기화한다. 이 단계에서 data는 아직까지 반응적이지 않으며, 컴포넌트의 라이프사이클에서 발생하는 이벤트 역시 설정되지 않은 상태이다.

2. created
Vue 인스턴스가 이벤트를 설정하고 data를 관찰할 때 발생한다. 이 단계에서 템플릿은 아직 마운트되거나 렌더링되지 않았지만, 이벤트들이 활성화되며 data에 반응적으로 접근하는 것이 가능하다.

2. Mounting : 돔(DOM) 삽입 단계

Mount 훅은 가장 많이 사용되는 단계로, 컴포넌트가 렌더링되기 직전이나 직후에 컴포넌트에 접근할 수 있는 단계이다. 초기 렌더링 직전에 컴포넌트에 직접 접근할 수 있다. 서버렌더링에서는 Mount 훅을 지원하지 않는다. 초기 렌더링 직전에 돔을 변경하고자 한다면 이 단계를 활용할 수 있다. 그러나 컴포넌트 초기에 세팅되어야할 데이터 페치는 created 단계를 사용하는것이 낫다.

mounted 훅에서 유의할 점은, 부모와 자식 관계의 컴포넌트에서 우리가 생각한 순서로 mounted가 발생하지 않는다는 점이다. 즉 부모의 mounted 훅이 자식의 mounted훅보다 먼저 실행되지 않는다. 오히려 그 반대이다. created훅은 부모 -> 자식 순서로 실행되지만 부모는 mounted훅을 실행하기 전에 자식의 mounted훅이 끝나기를 기다린다. 

1. beforeMount
컴포넌트가 DOM에 추가되기 직전에 실행되는 훅이다. 템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행된다.

2. mounted
mounted 훅에서는 컴포넌트, 템플릿, 렌더링된 돔(this.$el)에 접근할 수 있다. 모든 하위 컴포넌트가 마운트된 상태를 보장하지는 않는다. 흔히 컴포넌트에서 필요한 데이터를 외부에서 가져오는(fetch) 용도로 많이 사용된다.

3. Updating : Diff 및 재 렌더링 단계

Update 훅은 컴포넌트 내부의 반응적인 속성이 변했거나, 그 외의 것들이 재 렌더링을 일으킬 때 실행되는 단계이다. 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을 때 사용하면 된다.

1. beforeUpdate
beforeUpdate 훅은 컴포넌트의 data가 변경되어 업데이트 사이클이 시작될 때 실행된다. 정확히는 돔이 재 렌더링되고 패치 되기 직전에 실행된다. 재 렌더링 전의 새 상태의 데이터를 얻을 수 있고 더 많은 변경이 가능하다. 이 변경으로 이한 재 렌더링은 트리거되지 않는다.

2. updated
updated 훅은 컴포넌트의 data가 변하여 재 렌더링이 일어난 후에 실행된다. 돔이 업데이트 완료된 상태이므로 돔 종속적인 연산을 할 수 있다. 그러나 여기서 상태를 변경하면 무한루프에 빠질 수 있다. 모든 자식 컴포넌트의 재 렌더링 상태를 보장하지는 않는다.

4. Destruction : 해체 단계

Destruction 훅은 컴포넌트를 더 이상 사용하지 않을 때 사용하는 단계이다.

1. beforeDestroy
beforeDestroy 훅은 컴포넌트가 해체(뷰 인스턴스 제거)되기 직전에 실행된다. 이 훅은 반응적인 이벤트들이나 data들을 해체하는 훅으로 적합하다. 이 단계에서 컴포넌트는 여전히 문제없이 잘 동작한다. 이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 한다면 이 훅이 제격이다.

2. destroyed
destroyed 훅은 컴포넌트가 해체되고 난 직후에 호출된다. 모든 지시자들의 바인딩이 해제되었으며, 이벤트 리스너가 제거된 상태이다. Vue 인스턴스의 모든 디렉티브가 바인딩 해제 되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제된다.

 

---

참고자료

1. https://kr.vuejs.org/v2/guide/
2. https://github.com/sudheerj/vuejs-interview-questions-korean