[핵심만 골라 배우는 Vue.js by 수코딩] 5. 라이프사이클 훅

그림출처 : https://vuejs.org/guide/essentials/lifecycle.html

라이프사이클 훅

라이프사이클 훅 lifecycle hook	라이프사이클 훅은 브라우저가 Vue앱을 "실행"할 때 Vue 컴포넌트가 생성되고, DOM에 붙고, 갱신되고, 제거되는 과정 그 각 단계마다 호출되는 함수(훅, hook) * hook  낚시바늘
	진행순서	npm run dev -> local : http://localhost:5173 -> 브라우저 주소 호출
	호출방법	Options API	Composition API	공통설명
		export default {   name: 'LifecycleDemo',   data() {     return {       message: 'Hello Vue!',     }   },  beforeCreate() {},   created() {},   beforeMount() {},   mounted() {},   beforeUpdate() {},   updated() {},   beforeUnmount() {},      // Vue 3   unmounted() {},          // Vue 3   methods: {     updateMessage() {       this.message = 'Updated!'     }   } } </script>	<script setup> import {   onBeforeMount, onMounted,   onBeforeUpdate, onUpdated,   onBeforeUnmount, onUnmounted } from 'vue' onBeforeMount(() => console.log('beforeMount')) onMounted(() => console.log('mounted')) onBeforeUpdate(() => console.log('beforeUpdate')) onUpdated(() => console.log('updated')) onBeforeUnmount(() => console.log('beforeUnmount')) onUnmounted(() => console.log('unmounted')) </script> or  export default {   name: 'LifecycleExample',   setup() {     onBeforeMount(() => {       console.log('beforeMount')     })     onMounted(() => {       console.log('mounted')     })     onBeforeUpdate(() => {       console.log('beforeUpdate')     })     onUpdated(() => {       console.log('updated')     })     onBeforeUnmount(() => {       console.log('beforeUnmount')     })     onUnmounted(() => {       console.log('unmounted')     })     return {}   }
	설명	Vue2 부터 사용 vue 내부에서 자동사용	Vue 3 새롭게 도입(권장) 사용자가 직접  사용
	creation( 생성 )	beforeCreate	setup() : Vue가 Composition API를 통해 개발자가 만든 반응형 상태를 로드하는 함수 값은 return 으로 전달	인스턴스 초기화 전. data, props 사용 불가
		Init Options API
		created : 반응형 API 기반 객체 모두 준비  this. 접근가능		생성 후. data, props, methods 접근 가능 - 페이지 진입 시 사용자 정보 불러오기, 서버에서 목록 로딩 등 * 일찍 로딩하는게 이득인 데이터
		템플릿이 이미 js 변환되었나?  NO-> 실행중에 템플릿 컴파일 YES -> beforeMount 진행
	mounting (연결)	beforeMount()	onBeforeMount() : setup 내부에서 사용 this 사용불가	DOM에 붙기 전. 가상 DOM은 만들어짐
		초기 랜더링 & DOM 노드 생성 및 삽입
		mounted()	onMounted()	DOM에 붙은 후. $el, ref 접근 가능 - 차트 그리기, 3rd-party 라이브러리 연동, focus 지정 등 dom 에 의존하는작업
	updating(수정) 사용자 사용중 상태	반응형 데이터가 바뀌면 Vue는 컴포넌트를 다시 렌더링하고, 변경된 부분만 DOM에 패치(수정)합니다.
		beforeUpdate()	onBeforeUpdate()	반응형 데이터 변경 → DOM 업데이트 직전
		updated()	onUpdated()	DOM 업데이트 완료 후 - 데이터 바뀔 때 UI 애니메이션 트리거 데이터가 갱신된 후 DOM 작업 필요할 때
	해제 (unmounting)	beforeUnmount()	onBeforeUnmount()	컴포넌트 제거 직전
		unmounted()	onUnmounted()	컴포넌트 제거 완료 후 - WebSocket 연결 종료, 타이머 해제, 이벤트 제거, 서비스 종료 또는 페이지 이탈 시 정리 작업