라이프사이클 훅(Lifecycle Hooks)

라이프사이클 훅(Lifecycle Hooks)

Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거쳐요. 데이터 관찰 설정, 템플릿 컴파일, 인스턴스를 DOM에 마운트, 데이터가 바뀌면 DOM 갱신 같은 것들이죠. 이 과정에서 특정 단계마다 라이프사이클 훅이라는 함수가 실행되는데, 여기에 우리 코드를 넣어서 원하는 시점에 작업을 수행할 수 있어요.

출처: https://vuejs.org/guide/essentials/lifecycle.html

라이프사이클 훅 등록하기

예를 들어 onMounted 훅은 컴포넌트가 초기 렌더링을 끝내고 DOM 노드를 만든 뒤 실행할 코드를 등록해요.

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

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

가장 흔히 쓰는 훅은 onMounted, onUpdated, onUnmounted예요.

onMounted를 호출하면 Vue가 등록된 콜백을 현재 활성 컴포넌트 인스턴스에 자동으로 연결해요. 그래서 이 훅들은 컴포넌트 setup 중에 동기적으로 등록해야 해요. 예를 들어 이런 식은 동작하지 않아요.

setTimeout(() => {
  onMounted(() => {
    // 이건 동작하지 않음
  })
}, 100)

그렇다고 반드시 setup()이나 <script setup> 안에 문법적으로 위치해야 한다는 뜻은 아니에요. onMounted()는 setup() 내부에서 시작된 호출 스택이 동기적이기만 하면 외부 함수에서 호출해도 돼요.

라이프사이클 다이어그램

인스턴스 라이프사이클 전체를 나타내는 다이어그램이 공식 문서에 있는데, 지금 당장 모든 걸 이해할 필요는 없어요. 배우고 만들면서 참고 자료로 활용하면 돼요. 컴포넌트 생성부터 파괴까지, 주요 라이프사이클 훅과 템플릿 컴파일·마운팅 같은 내부 과정을 담고 있어요.

더 알아보기