[Vue]7. Lifecycle & Hook

Lifecycle

: 컴포넌트의 생성과 업데이트, 제거 구조
컴포넌트를 보여줄 때: create -> mount 이 단계로 생성된다.

• create: 데이터 생성
• mount: 생성된 데이터를 index.html 파일에 장착
• update: 데이터가 바뀌어 컴포넌트가 재렌더링될 때(일부분만 바뀌는게 아니로 전부 재렌더링됨)
• unmount: 다른페이지로 이동하거나 그럴 때 컴포넌트가 삭제될 때

🤫 알아야하는 이유?
✔️ 단계 중간중간에 코드를 실행시키고 싶을 때 Hook를 쓸 수 있다.
: mount 되기 전에 뭔가 ajax 요청으로 서버에서 데이터를 가져오거나 ,
update 되기 전에 뭔가 코드를 실행해서 데이터를 검증해보거나...
-> 그럴 때 lifecycle hook을 골라서 쓰면 된다!

---

Lifecycle Hook 종류

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

함수명만 잘 읽어봐도 어떤 기능을 하는 함수인지 알 수 있다.
beforeUpdate() : 컴포넌트가 update되기 전에 뭔가를 실행시키고 싶을 때 쓰는 함수
mounted(): 컴포넌트가 mount되고 나서 뭔가 실행시키고 싶을 때 쓰는 함수
데이터를 가져오는 코드는 보통 mounted() / created()에 작성한다.

쓰는법

<script> 태그 안에 작성

data(){
  return {}
},
mounted(){
  // 실행할 코드
}

예시

// 업데이트 되기 전에 month라는 데이터를 검사하고, 그 데이터가 2가 되면 안에 있는 코드 실행
beforeUpdate(){
    if (this.month == 2){
      alert('2개월은 너무 적음)
    }
 }