[Vue] Vue 인스턴스 라이프 사이클

 

vue 프로젝트를 실행하기에 앞서 vue 인스턴스의 생성주기(라이프사이클)를 알아보자.

라이프 사이클을 크게 나누면 1.인스턴스의 생성(created), 생성된 인스턴스를 2.화면에 부착(mounted), 화면에 부착된 3.인스턴스의 내용을 갱신(updated), 4.인스턴스가 제거(destroyed)되는 소멸의 4단계로 이루어진다.

 

vue 라이프 사이클 다이어그램

 

 

 

vue 프로젝트를 이행할때 우리는 데이터가 화면에 언제 반영되는지, 데이터 갱신이 언제 이루어지는지 등 적절한 데이터 반영과 그에 맞춘 화면 갱신을 알아야 할 필요성이 있다.

 

그렇다면, 라이프 사이클 속성을 조금 더 자세히 알아보자.

 

 

 

1. beforeCreate

 

- 인스턴스가 생성되고 난 이 후 가장 처음으로 실행되는 라이프 사이클 단계.

이 단계에서 data 속성, methods 속성이 아직 인스턴스에 정의되어있지 않고 돔과 같은 화면 요소에도 접근 할 수 없다.

 

 

2. created ** 생성단계

 

- beforeCreate 다음에 실행되는 단계.

- data속성과 methods 속성이 정의되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용해 data속성과 methods 속성에 정의된 값에 접근해 로직 수행이 가능.

그러나 아직 template 요소에 부착되기 이전이기 때문에 template 속성에 정의된 돔 요소 접근이 불가.

- data속성과 methods 속성에 접근이 가능한 첫 라이프 사이클 단계이고 컴포넌트가 생성되고 나서 실행되는 단계이므로 

서버에 데이터를 요청해 받아오는 로직을 수행하기에 용이.

 

 

3. beforMounted

 

- template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el속성에 지정한 화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계. render()함수가 호출되기 직전의 로직을 수행하기에 용이 

ex. render()함수는 자바스크립트로 화면의 돔을 그리는 함수이다.

 

 

4. mounted ** 부착단계

 

- el 속성에서 지정한 화면 요소에 인스턴스가 부착되고나면 호출하는 단계.

- template 속성에 정의한 화면 요소(돔)에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋음

- 돔에 인스턴스가 부착되자 마자 바로 호출되기 때문에 하위컴포넌트 혹은 외부 라이브러리에 의해 추가된 화면 요소들이 

최종 Html 코드로 변환되는 시점과 다를 수 있다.

(그럴경우, $nextTick() api를 활용하여 html 코드로 최종 변환될때까지 기다린 후 돔 제어 로직을 추가 - $nextTick() 는 vue 인스턴스의 속성이다. )

 

$nextTick()을 활용한 코드

 

++ 사진 설명추가) input 요소에 입력된 이벤트 함수(onAddList)로 isAddList라는 데이터 상태가 true로 변환한 이후, $nextTick()을 이용하여 인풋요소의 포커싱이 되는 로직을 추가하였다.

 

 

 

5. beforeUpdate

 

- 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계(여기에 값을 변경하는 로직을 넣더라도 화면에 다시 그려지지 않는다**) = 변경예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 넣을 수 있다. 

- el 속성에서 지정한 화면 요소에 인스턴스가 부착되고나면 인스턴스에 정의한 속성들이 화면에 치환됨. -> 치환된 값은 뷰의 반응성을 제공하기 위해 $watch() 속성(=데이터관찰)으로 감시를 한다.

 

 

5. updated ** 갱신단계

 

- 데이터 변경이 일어나 화면이 다시 그려졌을 때 호출되는 함수

- 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 실행되는 단계

- 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점, 데이터 변경 후 화면 요소 제어와 관련된 로직을 추가하기 좋은 단계.

-> 이 단계에서 데이터 값을 변경하면 무한 루프에 빠지므로 값을 변경하려면 computed (데이터 속성값 변화에 따른 자동연산 - 전체값을 다시 한번 계산), watch(데이터호출같은 비동기처리에 적합) 와 같은 속성을 사용해야함. (*computed와 watch의 경우, 뷰디렉티브 부분에서 다시 다룰 예정)

데이터 값을 갱신하는 로직은 가급적이면 beforeUpdate에 추가하고 updated에서는 변경 데이터 화면 요소(돔)와 관련된 로직을 추가하는것이 좋다. 

- mounted와 마찬가지로 하위 컴포넌트의 화면 요소와 외부 라이브러리에 의해 주입된 요소의 최종 변환시점이 다를 수 있으므로 

$nextTick()을 사용하여 완료될 때 까지 기다렸다가 로직을 추가한다.

 

data-bgColor의 데이터를 받고 있는 board-item

computed를 통해 board관련 데이터 변경을 수행하고 updated를 통해 요소에 접근하여 background-color를 변경

 

 

 

 

7. beforeDestroy

 

- 뷰인스턴스가 파괴되기 직전에 호출하는 단계

- 인스턴스에 접근할 수 있어서 뷰 인스턴스의 데이터를 삭제하기에 용이

 

 

8. destroy - 제거(소멸)단계

 

- 뷰 인스턴스가 파괴되고 나서 호출되는 단계

- 뷰 인스턴스에 정의한 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴