vue.js 인스턴스 라이프 사이클 정리 ( ++ created,beforeCreate,mounted ... 등등 )

맨날 spring + jsp + html 으로만 개발하다가 이번 프로젝트에 springboot + vue.js로 개발을 해봤는데 

이전에 잠깐 공부했던 angular.js가 떠오르더라구요

흠 맨날 하던것만 하니... 시대에 뒤쳐져가고 있습니다. 

 

암튼 오늘은 vue.js 라이프 사이클 속성에 대해 정리해볼까 합니다. 

• 인스턴스 흐름도
• 사이클 별 속성정보 

 

먼저 흐름도를 이미지로 보실게요 

1. 인스턴스 흐름도 

 

 

해당 부분은 인스턴스가 생성되고 화면에 인스턴스가 부착된 뒤 소멸 되기 까지의 흐름도입니다. 

 

라이프 사이클을 크게 나누면 

 

1. 인스턴스의 생성

2. 인스턴스의 화면 부착

3. 부착된 인스턴스의 내용 갱신 

4. 인스턴스의 소멸 

 

4 단계를 거치고 있습니다. 이 단계 사이에 라이프 사이클 속성 created, mounted, updated등이 실행됩니다. 

 

2. 사이클 별 속성정보 

 

• beforedCreated

 

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

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

• created

beforeCreate 라이프 사이클 단계 다음에 실행되는 단계입니다.

data 속성과 method 속성이 정의되었기 때문에 this.data, this.fetchData()와 같은 로직들을 이용하여 data 속성과 method속성에 정의된 값을 접근하여 로직을 실행할 수 있습니다.

다만, 아직 인스턴스가 화면 요소에 부착되기 전이기 때문에 templete 속성에 정의된 돔 요소에 접근 할 수 없습니다. 

• beforeMount

created단계 이후 templete속성에 지정한 마크업 속성을 render()함수로 변환한 후 el 속성에 지정한 화면요소에 인스턴스를 부탁하기 전에 호출하는단계입니다. 

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

• mounted

tempelete에 랜더링 되면서 데이터를 가져올 수 있어 실제 html처럼 정적으로 뿌려지는 첫화면이 이 화면인 것 같아요 . 

el 속성에서 지정한 화면요소에 인스턴스가 부착되고  나면 호출되는 단계로 templete속성에 정의한 화면요소에 접근할 수 있어 화면 요소를 제어하는 로직을 수행하기 좋습니다. 다만 돔에 인스턴스가 부착되자마자 바로 호출되기때문에 하위 컴포넌트나 외부 라이브러리에 의해 추가된 화면 요소들이 최종 html코드로 변환하는 시점과 다를 수 있습니다. 

• beforeUpdate

el 속성에서 지정한 화면요소에 인스턴스가 부착되고 나면 인스턴스에 정의한 속성들이 화면에  치환됩니다.

치환된 값은 뷰의 반응성을 제공하기 위해 $watch속성으로 관찰합니다. 

또한 beforeUpdate는 관찰하고 있는 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전에 호출되는 단계이며 변경 예정인 새 데이터에 접근할 수 있어 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있습니다. 만약 여기에 값을 변경하는 로직을 넣더라도 화면이 다시 그려지지는 않습니다. 

jquery기준으로 넘어오는 $("#id").val()같은 데이터 값을 정제하거나 변경하는 로직을 이쪽에서 수행하는 것 같네요 

• updated

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

데이터 변경으로 인한 화면 요소변경까지 완료된 시점이므로 데이터 변경 후 화면 요소제어와 관련된 로직을 추가하기 좋은 단계입니다. 이 단계에서 데이터 값을 변경하면 무한루프에 빠질 수 있기때문에 값을 변경하려면 computed나 watch와 같은 속성을 사용해야합니다. 

즉 데이터 값을 갱신하는 로직은 beforeUpdate에서, update에서는 변경 데이터의 화면요소와 관련된 로직을 추가하는게 좋습니다. 

치환된 값은 뷰의 반응성을 제공하기 위해 $watch속성으로 관찰합니다. 

위에서  beforeUpdate에서변경한 값을 실제 화면에 넣어주는 로직을 짜는 부분이 updated인데 실제로 로직구현은 watch와 computed 안에서 구현되더라구요 

실제 로직 구현할 때 제일 많이 쓴 단계가 mounted, watch, computed 였던 것 같네요.

watch와 computed는 따로 블로그에 정의하도록 하겠습니다.

 

• beforeDestroy

뷰 인스턴스가 파괴되기 직전에 호출되는 단계입니다.

아직 인스턴스에 접근 가능하며 데이터를 삭제하기 좋습니다.

• destroyed

뷰 인스턴스가 파괴되고 호출되는 단계입니다. 인스턴스에 정의된 모든 속성이 제거되고 하위에 선언한 인스턴스들 또한 모두 파괴됩니다. 

아래와 같이 각각의  라이프 사이클에 맞춰서 

mounted(){ 로직구현} 으로 사용하시면 됩니다.

export default {   name: 'Login',   components: {     qrcode   },   mounted() {     this.getUUID()     this.callFunction()   },   data() {     return {       message: '',       dismissSecs: 50,       dismissCountDown: 50,       mngNm: '',       telNo: ''     }   },   watch: {     dismissCountDown() {       if (this.dismissCountDown !== 0) {         this.callFunction()       }     }   },   methods: {     ...mapActions(['getLoginInfo', 'setLoginKey', 'getLoginKey']),     async getUUID() {       await this.getLoginInfo()       this.message = this.$store.state.auth.loginResult     },     async refresh() {       await this.getLoginInfo()       this.message = this.$store.state.auth.loginResult       this.dismissCountDown = 50     },     async callFunction() {       await this.getLoginKey({ login_key: this.message })     },     async AppLogin() {       await this.setLoginKey({         login_key: this.message,         mng_nm: this.mngNm,         tel_no: this.telNo       })     }   } }

 

 

그럼 2만