[Vue.js] 4. Vue 인스턴스 라이프사이클(생명주기)

해당 자료는 Vue 공식 홈페이지의 문서를 대부분 이용하고 있고 더 많은 정보를 참고하시려면

Vue 공식 홈페이지를 이용해주십시오 -> 바로가기 Vue 공식 홈페이지-배우기

 

 

Vue 라이프 사이클 (인스턴스의 상태)

 

각 Vue 인스턴스는 생성될 때마다 일련의 초기화 단계를 거친다. 예를 들어 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 예를 들어, 데이터 관찰 설정이 필요한 경우, 템플릿을 컴파일하는 경우, 인스턴스를 DOM에 마운트하는 경우, 그리고 데이터가 변경되어 DOM를 업데이트하는 경우가 있습니다. 그 과정에서 사용자 정의 로직을 실행할 수있는 라이프사이클 훅도  도 호출됩니다. (I think this is important)

*라이프사이클 훅: 개발자가 Vue의 상태에 따라 로직을 추가하는 것

 

여러가지 라이프 사이클이 있지만 필자가 알고 있고 실무에서 자주 사용했던 상태들 위주로 정리 하겠다.

 

beforeCreate	아직 컴포넌트가 돔에 추가되기 전이기 때문에 돔에 접근할 수 없다. 또한 data나 methods,watch 등이 실행 되기 전이다. ※ vue 인스턴스 data 사용, vm.$emit, vm$on 등 인스턴스의 메소드, vm.$el도 사용 불가능
Created	data,methods,watch 사용 가능하지만 아직 컴포넌트가 돔에 추가되기 전임 ※ vm.$el 사용 불가능
beforeMount	dom에 바인딩 되기 직전 상태이다 ※ vm.$el 사용 불가능
Mounted	dom에 바인딩 된 직후 상태이다. 모든 요소 사용 가능
beforeUpdate	data의 값이 변경됨에 따라 dom에도 값 변경을 전달하기 직전
Updated	data의 값이 변경됨에 따라 dom에도 값 변경이 된 직 후
beforeDestroy	인스턴스가 해제되기 전  모든 속성 사용 가능
beforCreate	인스턴스가 해제 된 후  모든 속성 사용 불가능

 

실무에서 주로 사용했던 것은 beforemount, mounted,update 쯤이 였던 것 같습니다.

 

beforemount= 외부에서 data로 값을 받아야하거나 또는 메서드를 실행하여 data에 저장해줄때 사용

mounted= 데이터가 dom에 부착된 후 해야 할 메서드 들 (대부분 비동기 api 호출)

updated= data값 변경에 따라 호출해야할 때 사용

 

이처럼 생명주기의 상태에 따라 원하는 로직을 적절히 사용해주면 조금더 짜임새 있는 코딩을 작성할 수 있던 것 같습니다.

 

마지막으로 부모와 자식이 있을 경우 생명 주기에 대해서 설명하고 마치겠습니다.

 

부모            -        자식

created   ------------> create

                                ↓

mounted<-----------  mounted 

 

이런식으로 흘러 가더군요. 이 흐름을 알고 있으면 컴포넌트의 적절한 훅에 로직을 넣어주면 좋을 것 같더라구요.

 

※주의사항

-위의 부모-자식 생명주기가 반드시 같은 상태로 유지한다고 보장 할 수가 없음. 왜냐면 비동기 함수가 호출되게 될 수도 있기 때문에 위와 같은 정확한 순서로 상태 변경을 하고 싶다면 this.$nextTick 을 사용하여 순위를 보장 받는게 좋을 것 같네요.

 

*Vue 인스턴스의 데이터가 변경된 후 DOM까지 변경이 완료 된 후에 nextTick에 있는 함수를 최종적으로 수행하게 된다.

 

아래 Vue 공식 홈페이지에서 퍼온 그림을 참조하시고 훅을 짜보시는 게 어떨까요?