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
'Web Frontend Developer' 카테고리의 다른 글
| Vue.js로 간단한 Trello 클론 만들어 보기 - Part1 (0) | 2020年05月25日 |
|---|---|
| <FE면접질문> #3. JavaScript (Part 1) (0) | 2020年05月22日 |
| [TroubleShooting] Content-type: x-www-form-urlencoded에서 POST 데이터 보내기 (0) | 2020年05月21日 |
| <FE면접질문> #2. CSS (2) | 2020年05月18日 |
| <FE면접질문> #1. 웹 브라우저 & HTML (0) | 2020年05月15日 |