Lifecycle Hooks 해부

핵심 개념

onMounted는 컴포넌트가 DOM에 마운트된 후 실행됩니다. onUpdated는 반응형 데이터 변경 후, onUnmounted는 언마운트 시 실행됩니다. 훅을 지우며 생명주기가 어떻게 멈추는지 확인하십시오.

코드 분석

VUE📋 코드 (22줄)

<div id='lc' style='font-family:monospace;padding:16px;background:#0d1117;color:#e8e8e8'>
<div id='lc-out'></div>
</div>
<script src='https://unpkg.com/vue@3/dist/vue.global.js'></script>
<script>
const{createApp,ref,onMounted,onUpdated,onUnmounted}=Vue;
createApp({
  setup(){
    const count=ref(0);
    const events=ref([]);
    const log=(msg)=>events.value.unshift('['+new Date().toLocaleTimeString()+'] '+msg);
    onMounted(()=>log('onMounted — DOM 연결 완료'));
    onUpdated(()=>log('onUpdated — 데이터 변경 감지'));
    onUnmounted(()=>log('onUnmounted — 컴포넌트 해체'));
    return{count,events,log};
  },
  template:`<div>
    <button @click='count++' style='background:#10b981;color:#080808;border:none;padding:6px 12px;cursor:pointer;font-family:monospace;font-size:11px;margin-bottom:12px;'>TRIGGER UPDATE ({{count}})</button>
    <div v-for='(e,i) in events.slice(0,5)' :key='i' style='font-size:10px;color:#555;margin-bottom:2px;'>{{e}}</div>
  </div>`
}).mount('#lc-out');
</script>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 Vue 3 'Lifecycle Hooks' 코드에서
반응성 시스템 관련 버그와 watch 누수를
찾아서 수정해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'Lifecycle Hooks'를 활용한 실전 Vue 컴포넌트를
Composition API + script setup 문법으로 만들어줘.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 Vue 'Lifecycle Hooks' 사용 패턴 전체를 분석하고
번들 크기·렌더링 성능·반응성 효율을
종합 점검해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

Vue 3 'Lifecycle Hooks'가 React의 대응 기능 대비
어떤 장단점이 있는지 솔직하게 평가하고
실무 선택 기준을 알려줘.

⭐ 이것만 기억하세요

Lifecycle Hooks 해부는 이 3가지만 확실히 잡으세요

1.컴포넌트가 화면에 나타나기 전에 DOM에 접근하면 null이 반환돼서 에러가 발생합니다

2.onMounted는 DOM 접근 가능 시점, onUpdated는 데이터 반영 후, onUnmounted는 정리(cleanup) 시점입니다

3.다음 챕터에서 prop drilling 없이 깊은 자식에게 데이터를 전달하는 Provide/Inject를 배웁니다

💬 이 챕터 질문 보기

VUE · CH.14 — 질문하거나 답변을 확인하세요

→

진행도 14 / 34

← 커리큘럼으로 ← 목록으로 (Vue 3)