Vue.js 컴포넌트 생명주기와 라이프사이클 훅

Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거칩니다. 이 과정에서 데이터 관찰 설정, 템플릿 컴파일, DOM에 인스턴스 마운트, 데이터 변경 시 DOM 업데이트 등의 작업이 이루어집니다. 이러한 단계 중에 Vue는 사용자가 특정 단계에서 자신의 코드를 추가할 수 있도록 라이프사이클 훅을 제공합니다.

라이프사이클 훅 등록하기

예를 들어, 컴포넌트가 초기 렌더링을 마치고 DOM 노드를 생성한 후에 코드를 실행하려면 onMounted 훅을 사용할 수 있습니다.

<script setup>
import { onMounted } from "vue";

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

이 외에도 onUpdated, onUnmounted와 같이 다양한 생명주기의 단계에서 호출되는 훅들이 있습니다. onMounted를 호출할 때, Vue는 등록된 콜백 함수를 현재 활성 컴포넌트 인스턴스와 자동으로 연결합니다. 이러한 훅들은 컴포넌트 설정 중 동기적으로 등록되어야 합니다.

예를 들어, 다음과 같이 하면 안 됩니다:

setTimeout(() => {
  onMounted(() => {
    // 이 코드는 작동하지 않습니다.
  });
}, 100);

onMounted()는 setup() 내부 또는 <script setup> 안에서 직접적으로 위치할 필요는 없지만, 호출 스택이 동기적이어야 하며 setup() 내부에서 발생해야 합니다.

생명주기 다이어그램

Vue 인스턴스의 생명주기를 설명하는 다이어그램은 아래와 같습니다. 모든 단계를 처음부터 완전히 이해할 필요는 없지만, 학습하고 더 많은 경험을 쌓으면서 유용한 참고 자료가 될 것입니다.

결론

Vue의 라이프사이클 훅을 이해하고 활용하는 것은 컴포넌트가 데이터 변화에 따라 어떻게 반응하고 업데이트되는지 제어하는 데 중요합니다. 초보자는 이러한 훅을 통해 더 세밀하게 컴포넌트의 동작을 이해하고 관리할 수 있습니다.