웹사이트 검색

Vue.js 수명 주기 후크 이해


소개

수명 주기 후크는 사용 중인 라이브러리가 배후에서 작동하는 방식을 보여주는 창입니다. 수명 주기 후크를 사용하면 구성 요소가 생성되거나, DOM에 추가되거나, 업데이트되거나, 소멸되는 시기를 알 수 있습니다.

이 기사에서는 Vue.js의 생성, 마운트, 업데이트 및 파괴 후크를 소개합니다.

전제 조건

이 자습서를 따르려면 다음이 필요합니다.

  • Vue.js에 익숙함. 자세한 내용은 Vue.js로 웹사이트를 개발하는 방법 시리즈를 읽어보세요.

생성 후크 이해(초기화)

만들기 후크는 구성 요소에서 실행되는 첫 번째 후크입니다. 구성 요소가 DOM에 추가되기 전에 작업을 수행할 수 있습니다. 다른 후크와 달리 생성 후크는 서버 측 렌더링 중에도 실행됩니다.

클라이언트 렌더링 및 서버 렌더링 중에 구성 요소에서 설정해야 하는 경우 생성 후크를 사용합니다.

생성 후크 내부의 DOM 또는 대상 마운팅 요소(this.$el)에 액세스할 수 없습니다.

전에만들기

beforeCreate 후크는 구성 요소 초기화 시 실행됩니다. 데이터가 반응하지 않고 이벤트가 아직 설정되지 않았습니다.

<script>
export default {
  beforeCreate() {
    console.log('At this point, events and lifecycle have been initialized.')
  }
}
</script>

이 예에서 beforeCreate 후크가 실행될 때 이 스니펫은 메시지를 기록합니다.

Output
At this point, events and lifecycle have been initialized.

만들어진

created 후크는 템플릿 및 Virtual DOM이 마운트되거나 렌더링되기 전에 실행됩니다. 활성 상태인 반응성 데이터이벤트에 액세스할 수 있습니다.

<template>
  <div ref="example-element">{{ propertyComputed }}</div>
</template>

<script>
export default {
  data() {
    return {
      property: 'Example property.'
    }
  },

  computed: {
    propertyComputed() {
      return this.property
    }
  },

  created() {
    console.log('At this point, this.property is now reactive and propertyComputed will update.')
    this.property = 'Example property updated.'
  }
}
</script>

이 예에서 스니펫은 propertyExample property로 저장합니다. created 후크가 실행되면 메시지를 기록합니다.

Output
At this point, this.property is now reactive and propertyComputed will update.

그런 다음 propertyExample property updated로 변경됩니다.

수명 주기 후반에 {{ propertyComputed }}예제 속성 대신 업데이트된 예 속성으로 나타납니다.

이 단계에서는 생성 후크의 몇 가지 예를 검토했으며 수명 주기의 다음 부분인 장착 후크로 이동할 준비가 되었습니다.

마운팅 후크 이해(DOM 삽입)

마운팅 후크는 종종 가장 많이 사용되는 후크입니다. 이를 통해 첫 번째 렌더링 직전과 직후에 구성 요소에 액세스할 수 있습니다. 그러나 서버 측 렌더링 중에는 실행되지 않습니다.

초기 렌더링 직전이나 직후에 구성 요소의 DOM에 액세스하거나 수정해야 하는 경우 마운팅 후크를 사용하십시오.

초기화 시 구성 요소에 대한 일부 데이터를 가져와야 하는 경우 마운팅 후크를 사용하지 마십시오.

참고: 대신 created(또는 keep-alive 구성 요소의 경우 createdactivated)를 사용하세요. 특히 서버 측 렌더링 중에 해당 데이터가 필요한 경우.

전에마운트

beforeMount 후크는 초기 렌더링이 발생하기 직전과 템플릿 또는 렌더링 함수가 컴파일된 후에 실행됩니다.

<script>
export default {
  beforeMount() {
    console.log(`At this point, vm.$el has not been created yet.`)
  }
}
</script>

이 예에서 beforeMount 후크가 실행될 때 이 스니펫은 메시지를 기록합니다.

Output
At this point, vm.$el has not been created yet.

탑재

mounted 후크에서 반응 구성 요소, 템플릿 및 렌더링된 DOM(this.$el을 통해)에 대한 전체 액세스 권한을 갖습니다.

특히 비 Vue 라이브러리를 통합할 때 DOM을 수정하려면 mounted를 사용하세요.

<template>
  <div ref="example-element">Example component.</div>
</template>

<script>
export default {
  mounted() {
    console.log(`At this point, vm.$el has been created and el has been replaced.`);
    console.log(this.$el.textContent) // Example component.
  }
}
</script>

이 예에서 mounted 후크가 실행될 때 이 스니펫은 메시지를 기록합니다.

Output
At this point, vm.$el has been created and el has been replaced.

또한 Example content.(this.$el.textContent) 메시지가 기록됩니다.

이 섹션에서는 마운팅 후크의 사용 사례를 살펴보았습니다. 다음 단계에서는 업데이트 후크를 사용하는 몇 가지 예를 검토합니다.

업데이트 후크 이해(Diff 및 Re-render)

업데이트 후크는 구성 요소가 변경하거나 다른 요소에서 사용하는 반응 속성으로 인해 다시 렌더링될 때마다 호출됩니다. 이를 통해 구성 요소의 watch-compute-render 주기에 연결할 수 있습니다.

디버깅이나 프로파일링을 위해 구성 요소가 다시 렌더링되는 시기를 알아야 하는 경우 업데이트 후크를 사용합니다.

구성 요소의 반응 속성이 언제 변경되는지 알아야 하는 경우 업데이트 후크를 사용하지 마십시오. 대신 감시자를 사용하십시오.

전에업데이트

beforeUpdate 후크는 구성 요소의 데이터가 변경된 후 실행되며 DOM이 패치되고 다시 렌더링되기 직전에 업데이트 주기가 시작됩니다.

구성 요소가 렌더링되기 전에 반응 데이터의 새 상태를 가져와야 하는 경우 beforeUpdate를 사용하십시오.

<template>
  <div ref="example-element">{{counter}}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  beforeUpdate() {
    console.log(`At this point, Virtual DOM has not re-rendered or patched yet.`)
    // Logs the counter value every second, before the DOM updates.
    console.log(this.counter)
  }
}
</script>

먼저 이 스니펫은 카운터0으로 저장합니다. created 후크가 실행되면 매 1000ms마다 카운터가 증가합니다. beforeUpdate 후크가 실행되면 이 스니펫은 메시지를 기록합니다.

Output
At this point, Virtual DOM has not re-rendered or patched yet.

그리고 카운터에 대한 숫자도 기록됩니다.

업데이트

updated 후크는 구성 요소의 데이터가 변경되고 DOM이 다시 렌더링된 후에 실행됩니다.

속성 변경 후 DOM에 액세스해야 하는 경우 updated를 사용하십시오.

<template>
  <div ref="example-element">{{counter}}</div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0
    }
  },

  created() {
    setInterval(() => {
      this.counter++
    }, 1000)
  },

  updated() {
    console.log(`At this point, Virtual DOM has re-rendered and patched.`)
    // Fired every second, should always be true
    console.log(+this.$refs['example-element'].textContent === this.counter)
  }
}
</script>

먼저 이 스니펫은 카운터0으로 저장합니다. created 후크가 실행되면 매 1000ms마다 카운터가 증가합니다. updated 후크가 실행되면 이 스니펫은 다음 메시지를 기록합니다.

Output
At this point, Virtual DOM has re-rendered and patched.

그리고 렌더링된 값과 현재 값이 같기 때문에 부울 값 true가 기록됩니다.

업데이트 후크 사용을 살펴보았으므로 이제 파괴 후크에 대해 배울 준비가 되었습니다.

Destruction Hook 이해하기(Teardown)

파괴 후크를 사용하면 정리 또는 분석 전송과 같은 구성 요소가 파기되었을 때 작업을 수행할 수 있습니다. 컴포넌트가 해체되고 DOM에서 제거될 때 실행됩니다.

파괴하기 전에

beforeDestroy는 분해 직전에 실행됩니다. 귀하의 구성 요소는 여전히 완전히 존재하고 작동합니다.

이벤트 또는 반응형 구독을 정리해야 하는 경우 beforeDestroy를 사용하세요.

<script>
export default {
  data() {
    return {
      exampleLeakyProperty: 'This represents a property that will leak memory if not cleaned up.'
    }
  },

  beforeDestroy() {
    console.log(`At this point, watchers, child components, and event listeners have not been teared down yet.`)
    // Perform the teardown procedure for exampleLeakyProperty.
    // (In this case, effectively nothing)
    this.exampleLeakyProperty = null
    delete this.exampleLeakyProperty
  }
}
</script>

이 스니펫은 먼저 exampleLeakyProperty를 저장합니다. beforeDestroy 후크가 실행되면 이 스니펫은 메시지를 기록합니다.

Output
At this point, watchers, child components, and event listeners have not been torn down yet.

그런 다음 exampleLeakyProperty가 삭제됩니다.

파괴됨

destroyed 후크에 도달하면 구성 요소에 거의 아무것도 남지 않습니다. 그것에 붙어 있던 모든 것이 파괴되었습니다.

막판 정리를 수행하거나 원격 서버에 구성 요소가 제거되었음을 알려야 하는 경우 destroyed를 사용하십시오.

<script>
import ExampleAnalyticsService from './example-analytics-service'

export default {
  destroyed() {
    console.log(`At this point, watchers, child components, and event listeners have been torn down.`)
    console.log(this)
    ExampleAnalyticsService.informService('Component destroyed.')
  }
}
</script>

먼저 이 스니펫은 ExampleAnalyticsService를 가져옵니다. beforeDestroy 후크가 실행되면 이 스니펫은 메시지를 기록합니다.

Output
At this point, watchers, child components, and event listeners have been torn down.

나머지 구성 요소는 콘솔에 기록되고 ExampleAnalyticsService에는 구성 요소가 파괴되었습니다.라는 메시지가 전달됩니다.

이것으로 Vue.js 수명 주기 후크에 대한 일반적인 검토를 완료했습니다.

기타 후크

활성화비활성화 두 개의 다른 후크가 있습니다. 이는 이 문서의 범위를 벗어나는 주제인 keep-alive 구성 요소에 대한 것입니다.

태그로 래핑된 구성 요소가 켜짐 또는 꺼짐으로 전환될 때 이를 감지할 수 있다고 말하면 충분합니다. 이를 사용하여 구성 요소의 데이터를 가져오거나 상태 변경을 처리하여 전체 구성 요소를 다시 빌드할 필요 없이 효과적으로 createdbeforeDestroy로 작동할 수 있습니다.

결론

이 기사에서는 Vue.js 인스턴스 수명 주기에서 사용할 수 있는 다양한 수명 주기 후크를 소개했습니다. 생성 후크, 마운팅 후크, 업데이트 후크 및 소멸 후크에 대한 다양한 사용 사례를 탐색했습니다.

Vue.js에 대해 자세히 알아보려면 연습 및 프로그래밍 프로젝트에 대한 Vue.js 주제 페이지를 확인하세요.