02-1.1 뷰 라이프사이클

라이프 사이클 단계를 크게 나누면

 

1. 인스턴스의 생성

2. 생성된 인스턴스를 화면에 부착

3. 화면에 부착된 인스턴스의 내용이 갱신

4. 인스턴스가 제거되는 소멸

 

위와 같이 4단계로 이루어진다.

그리고 각 단계 사이에 사이클 속성 created, mounted, updated 등이 실행된다.

 

beforeCreated

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

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

 

created 

 - beforeCreated 라이프 사이클 단계 ㄷ음에 실행되는 단계

 - data 속성과 methods 속성이 정의 되었기 때문에 this.data 또는 this.fetchData()와 같은 로직들을 이용하여

   data 속성과 methods 송석에 정의된 값에 접근하여 로직 실행 가능

 - 다만 아직 인스턴스가 화면 요소에 부착되기 전이기 떄문에 template 속성에 정의된 돔 요소로 접근 할수 없다.

 - data 속성과 methods 속성에 접근할 수 있는 가장 첫 라이프 사이클 단게이자 컴포넌트가

   생성되고 나서 실행되는 단계 이기 떄문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기 좋다.

 

beforeMount

 - created 단계 이후 template 속성에 지정한 마크업 속성을 render() 함수로 변환한 후 el 속성에 지정한

   화면 요소(돔)에 인스턴스를 부착하기 전에 호출되는 단계

 - render()함수가 호출되기 직전의 로직을 추가하기 좋다. 

 - render() : 자바스크립트로 화면의 돔을 그리는 함수

 

mounted

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

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

 - 다만 인스턴스가 돔에 부착되자마자 바로 호출되기 때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된

   화면 요소들이 최종 HTML 코드로 변환되는 시점과 다를 수 있다.

 - 변환되는 시점이 다를 경우 $nextTick() API를 활용하여 HTML 코드로 최종 파싱될 땎지 기다린 후

   돔 제어 로직을 추가한다.

 

beforeUpdate

 - * 데이터 관찰 : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이

                       화면에 치환된다. 치환된 값은 뷰의 반응성(Reactivity)을 제공하기 위해 $watch속성으로 감시한다.

 - 뷰의 반응성 : 뷰의 특징 중 하나이며 코드의 변화에 따라 화면이 반사적으로 반응하여 빠르게 화면을 갱신하는 것

 - beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계

 - 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관려된 로직을 미리 넣을 수 있다.

 - 만약 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않는다.

 

updated

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

 - 데이터 변경으로 인한 화면 요소 변경까지 완료된 시점이므로 데이터 변경 후 화면 요소 제어와 관련된 로직을

   추가하기 좋은 단계

 - 이 단계에서 데이터 값을 변경하면 무한 루프에 빠질 수 있기 때문에 값을 변경하려면

   computed, watch와 같은 속성을 사용할 것

 - 따라서 데이터 값을 갱신하는 로직은 가급적 beforeUpdate에 추가하고, updated에서는 변경 데이터의

   화면 요소(돔)와 관련된 로직을 추가하는게 좋다.

 

beforeDestory

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

 - 이 단계에서는 인스턴스에 접근할 수 있어, 뷰 인스턴스의 데이터를 삭제하기 좋은 단계

 

destroyed

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

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

 -