[Vue3] LifeCycle hook, mount

비전공자로서 정말. IT는 개념이나 용어 익히는 것부터 낯설다.

 

생명주기

mount

LifeCycle hook

 

---

 

1. 생명주기란 ?

 

 : 컴포넌트가 만들어지고 → 화면에 나타나고 → 사라지기까지의 과정

 

Vue 컴포넌트를 만들면 Vue가 아래와 같은 순서로 처리한다.

 

1) setup() → 초기 세팅
2) beforeMount → 마운트 직전
3) mounted → 화면에 실제 나타난 순간
4) updated → 데이터 바뀔 때마다 실행
5) unmounted → 컴포넌트가 사라질 때

 

 

 

2. mount 란 ?

 

 : 컴포넌트가 실제로 화면에 나타나는 순간.

mount 는 HTML에 컴포넌트를 연결한다는 의미

 

Vue에서 <div id="app"> 이런 곳에 컴포넌트를 mount해서 실제로 사용자에게 보여준다.

createApp(App).mount('#app');

 

마운트된 후 실행되는 함수가 mounted() 또는 onMounted() 이다.

 

 

 

3. Lifecycle Hook이란 ?

 

각 생명 단계마다 Vue가 실행해주는 함수

 

• mounted() → “컴포넌트가 화면에 붙었을 때 실행하고 싶은 코드 넣는 곳”
• updated() → “데이터가 바뀌어서 화면이 다시 그려질 때 실행하고 싶은 코드”
• unmounted() → “컴포넌트가 사라질 때 정리 작업하고 싶은 코드”

 

 

onMounted() 예제

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

onMounted(() => {
  console.log('화면에 컴포넌트가 나타났다');
});
</script>

<template>
  <p>마운트 후 보이는 화면입니다</p>
</template>

 

 

 

결과 : 이 컴포넌트가 브라우저 화면에 표시되는 순간 콘솔에 메시지가 찍힌다.

 

● 상황별 Hook 추천

화면에 나타나자마자 API 요청	onMounted()
데이터가 바뀔 때마다 뭔가 처리하고 싶음	onUpdated()
타이머, 이벤트 정리	onUnmounted()