[vue3 공식문서 번역]Essentials.10.Lifecycle Hooks

각각의 뷰 컴포넌트 인스턴스는 이것들이 생성될 때 일련의 초기화 과정을 거친다. 예를 들면, 데이터를 관측하고, 템플릿을 컴파일 하고, 톰에 인스턴스를 마운트하고, 데이터바 바뀌면 DOM을 업데이트하는 일이다. 도중에, 라이프사이클 훅을 호출하는 함수를 실행시켜서, 특정한 단계에 유저의 코드를 추가하는 기회를 유저에게 제공한다.

 

라이스파이클 훅 등록하기

예를들면, onMounted 훅은 컴포넌트가 초기 렌더링과 DOM 노드 생성을 끝낸 후에 코드를 실행시키는데 사용될 수 있다.

<script setup>
inport { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mointed.`)
})
</script>

인스턴스의 라이프사이클의 다른 단계에 호출되는 다른 훅도 있다. 가장 흔하게는 onMounted, onUpdated, onUnmounted이다.

 

onMounted를 호출할 때, 뷰는 자동으로 현재 동작하는 컴포넌트 인스턴스와 생성된 콜백 함수를 연관짓는다. 이 과정은 컴포넌트 셋업 중에 동기화하며 생성되는 훅을 필요로한다. 예를들어 이건 동작하지 않는다.

setTimeout(() => {
  onMounted(() => {
    // 동작X
  })
}, 100)

onMounted()호출이 setup()이나 <script setup> 안에 문법적으로 반드시 위치해야 한다는 것은 아니라는걸 기억해라. onMounted()는 콜스택이 동기화되고, setup()안에서 발생하는 경우 외부함수에서 호출될 수 있다.

 

라이프사이클 다이어그램

아래는 인스턴스 라이프사이클 다이어그램이다. 지금 당장 모든걸 이해할 필요는 없지만, 배우고 개발할수록, 매우 좋은 참고자료가 될 것이다.

모든 라이프사이클 후고가 자세한 use case는 라이프사이클 훅 API 문서를 참조하라.