[Vue] #13 - 컴포넌트의 lifecycle

1. 왜 배울까? -> 훅을 쓰기위해

훅이란?

다음 단계로 가기 전에 이걸 실행해주고 가세요~라고 후크를 거는 것

1. create 단계

데이터만 존재하는 단계

2. mount 단계

< template>사이에 있던걸 실제 html로 바꿔주는 단계
mounted함수를 사용하면 코드가 실제 html로 변환이 된 후에, 함수가 실행이 된다.

3. 컴포넌트 생성

inde.html에 장착하는 단계

4. update 단계

5. unmount 단계

2. hook 종류

create단계 전 : beforeCreate() create단계 후 : created() mount단계 전 : beforeMount() mount단계 후 : mounted() update단계 전 : beforeUpdate() update단계 후 : updated() unmount단계 전 : beforeUnmount() unmount단계 후 : unmounted()

등등

3. hook 사용법

date, methods와 나란히 같은 위치에 함수선언

mounted(){ // 이안에 함수적어서 동작 실행할 수 있음 } beforeCreated(){ // 이안에 함수적어서 동작 실행할 수 있음 }

4. setTimeout(function(){},2000);

-> 2초 후에 function안의 동작을 실행하겠다는 뜻

mounted(){ setTimeout(()=>{ this.showDiscount = false; }, 2000); }

2초 후에 this.showDiscount = false; 가 실행된다
모든 컴포넌트에 다 적용 가능하다

❗ 주의할 점 ❗

this를 이용해 바깥의 데이터에 접근할 땐 ( )=>{ } 형식으로 써야 잘 가져올 수 있다
function( ){ } (X)