🧩 Vue 2로 배우는 프론트엔드 기초

🔍 Vue 생명주기 관점 설명

✅ RightQuickMenu.vue (.tag-btn 자동 전환)

<template>
  <div class="right-quick-menu">
    <div class="quick-card play-card">
      <img
        src="https://img.megagong.net/m/2025/0715_playground/bnr_right_gong1.png"
        alt="이벤트 이미지"
      />
    </div>

    <div class="quick-card coupon-card">
      <p class="badge">30% 할인<br />쿠폰 증정</p>
      <p class="main-text">
        e-교재<br /><span class="blue">첫 구매 이벤트</span>
      </p>
      <button class="detail-btn">자세히 보기</button>
    </div>

    <div class="quick-card nextpass-card">
      <p class="small">모든 수험생을 위한</p>
      <p class="blue-bold">공무원 넥스트패스<br />맞춤 할인 혜택</p>
      <button
        class="tag-btn"
        :class="{ on: activeTag === 0 }"
      >
        전·현직 공무원
      </button>
      <button
        class="tag-btn"
        :class="{ on: activeTag === 1 }"
      >
        희망 인기가<br />(저소득/차상위)
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: "RightQuickMenu",
  data() {
    return {
      activeTag: 0, // 현재 on 이 적용된 tag 버튼 인덱스
      intervalId: null, // setInterval ID 저장용
    };
  },
  mounted() {
    // ✅ 컴포넌트가 DOM에 완전히 마운트된 후 실행
    // 3초마다 activeTag를 0 ↔ 1로 변경 (toggle)
    this.intervalId = setInterval(() => {
      this.activeTag = (this.activeTag + 1) % 2;
    }, 3000);
  },
  beforeDestroy() {
    // ✅ 컴포넌트가 제거되기 직전에 실행
    // 타이머 제거로 메모리 누수 방지
    clearInterval(this.intervalId);
  },
};
</script>

✅ 결과 요약

• mounted() → 자동 반복 타이머 시작 (3초 간격으로 버튼 번갈아 하이라이트)
• beforeDestroy() → 타이머 정리 (불필요한 반복 방지 및 리소스 관리)

GitHub - heroyooi/vue2-megagong at ch6_resolve