나정이의 공부/IT

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

나정_ 2021. 6. 24. 09:44
728x90
반응형

맨날 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만 

 

728x90
반응형