vue.js의 created와 mounted의 차이 + Vue의 라이프 사이클

created

인스턴스가 작성된 후 동기적으로 호출됩니다. 이 단계에서 인스턴스는 데이터 처리, 계산된 속성, 메서드, 감시/이벤트 콜백 등과 같은 옵션 처리를 완료합니다. 그러나 마운트가 시작되지 않았으므로 $el 속성을 아직 사용할 수 없습니다.

virtual dom 을 사용할 수 없다.

created에서 이제 data와 events가 활성화 되어 접근할 수 있다. 여전히 템플릿과 가상돔은 마운트 및 렌더링 되지 않은 상태이다.

mounted

el이 새로 생성된 vm.$el로 대체된 인스턴스가 마운트 된 직후 호출됩니다. 루트 인스턴스가 문서 내의 엘리먼트에 마운트 되어 있으면, mounted가 호출 될 때 vm.$el도 문서 안에 있게 됩니다.

virtual dom 을 사용할 수 있다.

컴포넌트, 템플릿, 렌더링된 돔에 접근 가능

공식 문서에는 el 사용 여부를 중점으로 설명되어있다.

이 말은 Virtual DOM 생성 여부와 관련이 있다. (Virtual DOM)

created와 mounted를 완벽히 이해하지 않아도, 사실상 크게 문제가 없을 수 있다.

하지만 규모가 커지면서, 컴포넌트간 통신이 있을 경우 문제가 발생할 수 있다.

출처: https://mygumi.tistory.com/201 [마이구미의 HelloWorld]

사용에 있어, 하나의 예로 created는 데이터 초기화에 대한 목적, mounted는 DOM 조작에 대한 목적으로 사용할 수 있다.

출처: https://mygumi.tistory.com/201?category=697395 [마이구미의 HelloWorld]

*렌더링이란?

rendering은 renderer engine(skia)이 합니다

Render는 html로 입력받아 해석해서 표준 출력 장치(모니터)로 출력 해 줍니다. (화면에 뿌려주는 역할)

위 작업을 Rendering이라고 합니다

*바인딩이란?

값이 서버상에서 들어간것 

이름을 속성에 연관(bind)시키는 과정이 바인딩이다.

특정객체에서 실행되게끔 고정시키는 그런 역할

바인딩(Binding) : 컴퓨터 프로그래밍에서 각종 값들이 확정되어 더 이상 변경할 수 없는 구속(Bind) 상태가 되는 것.

프로그램 내에서 변수, 배열, 라벨, 절차 등의 명칭, 즉, 식별자(identifier)가 그 대상인 메모리 주소, 데이터형 또는 실제 값으로 배정되는 것이 이에 해당된다.

원시 프로그램의 컴파일링 또는 링크 시에 확정되는 바인딩을 정적 바인딩(static binding)이라 하고, 프로그램이 실행되는 과정에서 바인딩 되는 것을 동적 바인딩(dynamic binding)이라고 한다.

프로그래밍에서는 바인딩을 가급적 뒤로 미루도록 권고하고 있다.

*컴포넌트란?

컴포넌트는 Vue의 가장 강력한 기능 중 하나입니다. 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는 데 도움이 됩니다. 상위 수준에서 컴포넌트는 Vue의 컴파일러에 의해 동작이 추가된 사용자 지정 엘리먼트입니다. 경우에 따라 특별한 is 속성으로 확장 된 원시 HTML 엘리먼트로 나타날 수도 있습니다.

Vue 컴포넌트는 Vue 인스턴스이기도 합니다. 그러므로 모든 옵션 객체를 사용할 수 있습니다. (루트에만 사용하는 옵션은 제외) 그리고 같은 라이프사이클 훅을 사용할 수 있습니다.

*돔이란?

여기서 또 virtual  dom 이란 무슨 뜻이지?

Virtual DOM 기술은 DOM 조작에 있어 비효율적인 이유에서 나오게 되었다.

DOM 조작에 있어, 비효율적인 이유를 살펴보자.

기존에는 아래와 같이, Javascript 또는 Jquery를 통해 원하는 dom 노드를 찾은 후 변경하는 행위를 했다.

하지만 수천가지의 노드가 존재할 수 있기에, 계산하기 위해 큰 비용을 투자하게 된다.

그 결과, 성능 저하로 인한 페이지 속도 지연이 발생한다.

위와 같은 처리에 대한 비용이 큰 자세한 이유는 링크를 참고하길 바란다. http://d2.naver.com/helloworld/59361

간단히 설명하자면, 아래의 그림과 같은 동작이 DOM 조작을 할 때마다 영향을 끼치게 되는 것이다.

이러한 배경 속에서 Virtual DOM 이 탄생하게 되었다.

이러한 Virtual DOM에 대해 코드를 통해 표현할 수 있다.

직접 DOM API를 사용하지 않고, domNode 객체를 활용하게 된다.

이러한 처리는 실제 DOM이 아닌 메모리에 있기 때문에 훨씬 더 빠르다.

즉, 실제 DOM이 아닌 Virtual DOM에 먼저 변경 작업을 해준다.

그리고 변경된 부분만 찾아 실제 DOM에 변경해주는 방식이다.

이로써, 기존 View 방식보다 많은 양의 연산을 줄일 수 있게 된다.

Virtual DOM의 여부에 따른 차이를 보여주는 애니메이션 영상이다. 

참고하면 도움이 될 것이다.

https://www.youtube.com/watch?v=BYbgopx44vo

출처: https://mygumi.tistory.com/190 [마이구미의 HelloWorld]

*템플릿이란?

Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용합니다. 모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수있는 유효한 HTML입니다.

내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 합니다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있습니다.

가상 DOM 개념에 익숙하고 JavaScript의 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있으며 선택사항으로 JSX를 지원합니다.

*훅(hook)이란?

훅킹(Hooking)이란 이미 작성되어 있는 코드의 특정 지점을 가로채서 동작 방식에 변화를 주는 일체의 기술

 훅이란 낚시바늘같은 갈고리 모양을 가지는데 여기서는 코드의 중간 부분을 낚아채는 도구라는 뜻으로 사용된다. 대상 코드의 소스를 수정하지 않고 원하는 동작을 하도록 해야 하므로 기술적으로 어렵기도 하고 운영체제의 통상적인 실행 흐름을 조작해야 하므로 때로는 위험하기도 하다.

Vue.js의 라이프 사이클은 크게 Creation, Mounting, Updating, Destruction 으로 나눌 수 있다.

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

Creation 단계에서 실행되는 훅(hook)들이 라이프사이클 중에서 가장 처음 실행된다. 이 단계는 컴포넌트가 돔에 추가되기 전이다. 서버 렌더링에서도 지원되는 훅이다.

따라서 클라이언트 단과 서버단 렌더링 모두에서 처리해야할일이 있다면 이단계에서 하면된다. 아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근하거나 this.$el를 사용할 수 없다.

이 단계에서는 beforeCreate 훅과 Created 훅이 있다.

beforeCreate

모든 훅 중에 가장 먼저 실행되는 훅이다. 아직 data와 events(vm.$on, vm.$once, vm.$off, vm.$emit)가 세팅되지 않은 시점이므로 접근하려고 하면 에러를 뿜어낼 것이다.

	<script>
	export default {
	data () {
	return {
	title: ''
	}
	},
	beforeCreate () {
	//can't use Data(this.title ...), events(vm.$on, vm.$once, vm.$off, vm.$emit)
	}
	}
	</script>

created

created 훅에서는 이제 data와 events가 활성화되어 접근할 수 있다. 여전히 템플릿과 가상돔은 마운트 및 렌더링되지 않은 상태이다.

<script>
	export default {
	data () {
	return {
	title: ''
	}
	},
	computed: {
	titleComputed() {
	console.log('I change when this.property changes.')
	return this.property
	}
	},
	created () {
	//can use Data(this.title, this.titleComputed ...), events(vm.$on, vm.$once, vm.$off, vm.$emit)
	//don't use $el
	}
	}
	</script>

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

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

초기 랜더링 직전에 돔을 변경하고자 한다면 이 단계를 활용할 수 있다. 그러나 컴포넌트 초기에 세팅되어야할 데이터 페치는 created 단계를 사용하는것이 낫다.

beforeMount

beforeMount 훅은 템플릿과 렌더 함수들이 컴파일된 후에 첫 렌더링이 일어나기 직전에 실행된다. 대부분의 경우에 사용하지 않는 것이 좋다. 그리고 서버사이드 렌더링시에는 호출되지 않는다.

<script>
	export default {
	beforeMount() {
	console.log(`this.$el doesn't exist yet, but it will soon!`)
	}
	}
	</script>

mounted

mounted 훅에서는 컴포넌트, 템플릿, 렌더링된 돔에 접근할 수 있다. 모든 하위 컴포넌트가 마운트된 상태를 보장하지는 않는다. 서버렌더링에서는 호출되지 않는다.

<script>
	export default {
	mounted() {
	console.log(this.$el.textContent) // can use $el
	this.$nextTick(function () {
	// 모든 화면이 렌더링된 후 실행합니다.
	})
	}
	}
	</script>

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

// Parent
export default {
    created() {
        console.log("Parent created")
    },
    mounted() {
        console.log("Parent mounted")
    }
}

// Child
export default {
    created() {
        console.log("Child created")
    },
    mounted() {
        console.log("Child mounted")
    }
}

=> Parent created
=> Child created
=> Child mounted
=> Parent mounted

출처: https://mygumi.tistory.com/201 [마이구미의 HelloWorld]

위 그림처럼 Created훅은 부모->자식의 순서로 실행되지만 mounted는 그렇지 않다는 것을 알 수 있다. 다른 식으로 말하면 부모는 mounted훅을 실행하기 전에 자식의 mounted훅이 끝나기를 기다린다. (참고 Vue Parent and Child lifecycle hooks)

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

컴포넌트에서 사용되는 반응형 속성들이 변경되거나 어떤 이유로 재 렌더링이 발생되면 실행된다. 디버깅이나 프로파일링 등을 위해 컴포넌트 재 렌더링 시점을 알고 싶을때 사용하면 된다. 조심스럽지만, 꽤 유용하게 활용될 수 있는 단계이다. 서버렌더링에서는 호출되지 않는다.

beforeUpdate

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

updated

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

<script>
	export default {
	updated() {
	this.$nextTick(function () {
	// 모든 화면이 렌더링된 후 실행합니다.
	})
	}
	}
	</script>

4. Destruction : 해체 단계

beforeDestroy

이 훅은 해체(뷰 인스턴스 제거)되기 직전에 호출된다. 컴포넌트는 원래 모습과 모든 기능들을 그대로 가지고 있다. 이벤트 리스너를 제거하거나 reactive subscription을 제거하고자 한다면 이 훅이 제격이다. 서버 렌더링시 호출되지 않는다.

destroyed

이 훅은 해체(뷰 인스턴스 제거)된 후에 호출된다. Vue 인스턴스의 모든 디렉티브가 바인딩 해제 되고 모든 이벤트 리스너가 제거되며 모든 하위 Vue 인스턴스도 삭제된다. 서버 렌더링시 호출되지 않는다.