[Vue.js] Vue 컴포넌트의 라이프사이클 훅(Lifecycle Hook)

1. created
1. 컴포넌트 인스턴스가 생성된 직후
2. DOM이 아직 생성되지 않은 시점

2. mounted
1. 컴포넌트에서 DOM이 만들어진 시점
2. 외부데이터나 라이브러리 추가 시점

3. updated
1. 데이터가 변경될 때 DOM을 업데이트

4. unmounted(혹은 destroyed)
1. 컴포넌트 종료

✅ 라이프사이클 훅이란?

✅ 라이프사이클 훅을 활용해 자동으로 슬라이드 되는 컴포넌트 만들기

🔹 mounted()

mounted() {
  // 컴포넌트가 DOM에 실제로 붙은 직후 실행
  this.interval = setInterval(() => {
    ...
  }, 3000)
}

• 역할: DOM 접근 가능해짐 → setInterval, API 호출, focus 지정 등 가능

• 타이밍: 화면에 컴포넌트가 실제로 렌더링된 이후

🔹 unmounted()

unmounted() {
  clearInterval(this.interval);
}

• 역할: 컴포넌트가 사라질 때 정리 작업

• 예: setInterval, 이벤트 리스너, 타이머 제거 등

• Vue 3에서만 사용 (beforeUnmount, unmounted로 분리됨)

✅ 라이프사이클 요약 (Vue 3 기준)

✅ 코드 흐름 요약

mounted() {
  // 3초마다 텍스트 자동 변경
  this.interval = setInterval(...);
}
unmounted() {
  // 컴포넌트 제거 시 인터벌 정리
  clearInterval(this.interval);
}

✅ 전체 코드

<template>

  <Event :text="text[eventTextNum]" />

</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      text: [
        'NEPLIX 강렬한 운명의 드라마, 경기크리쳐',
        '디즈니 100주년 기념작, 위시',
        '그날, 대한민국의 운명이 바뀌었다, 서울의 봄',
      ],
      eventTextNum: 0,
      interval: null,
    }
  },
  components: {
    Event: Event,
  },
  
  mounted() {
    this.interval = setInterval(() => {
      if(this.eventTextNum == this.text.length - 1) {
        this.eventTextNum = 0;
      } else {
        this.eventTextNum +=1;
      }
    }, 3000)
  },
  
  unmounted() {
    clearInterval(this.interval); // 앱이 종료될 경우 인터벌 해제
  },
}
</script>