lifecycle(라이프사이클)

컴포넌트의 lifecycle

• 우리가 만든 컴포넌트들은 웹페이지에 표시되기까지 일련의 step을 거침 그 step을 라이프사이클이라 함
• 서버에서 데이터 가져올 때도 lifecycle hook 안에 코드 짬(created() 사용 등)

단계

1. create 단계: 데이터만 존재하는 단계
2. mount 단계: <template> 사이에 있던 걸 실제 HTML로 바꿔줌
3. 컴포넌트 생성 단계: index.html 장착함
4. update 시 단계: data가 변하면 html이 재렌더링 됨
5. unmount 단계: 컴포넌트가 삭제되면 실행되는 단계

라이프사이클 훅

• 위 단계마다 hook을 걸어서 중간중간 원하는 코드 실행 가능

ex) 컴포넌트가 mount 되기 전에 해당 코드 실행
ex) 컴포넌트가 update(재렌더링)되기 전에 해당 코드 실행
ex) create 되기 전에 해당 코드 실행

훅 거는 법

1. UI의 현재 상태 데이터 만들기

export default {
data(){// 데이터 보관통
  return {
    showDiscount: true,
  }
},
}

2. 함수 만들기

• arrow funtion 지향
• app.vue가 mount 되고나서 코드 실행

  export default {
    name: 'App',
    mounted(){ //mount 후에 실행
		setTimeout(() => {
        this.showDiscount = false;
      }, 200)
    }
  }

3. UI에 걸어주기

<span v-if="showDiscount">사라진다</span>
// showDiscount는 true임

4. 훅 종류

beforeCreate()
created()
beforeMount()
mounted()
beforeUpdate()
updated()
beforeUnmount()
unmounted()
등