[Vue] 라이프 사이클 훅, 다이어그램 설명

⚠️ 이 포스팅은 Vue3(한국어): 어플리케이션 & 컴포넌트 인스턴스을 공부하고 정리한 블로그 포스팅입니다. ⚠️

1. 라이프사이클 훅
2. 라이프사이클 다이어그램

 

---

 

라이프사이클 훅

라이프 사이클이란 컴포넌트가 우리 눈에 보이게된 그 순간부터 사라지는 순간까지 즉, 컴포넌트의 생애주기를 말한다. Vue에서는 컴포넌트가 1) 데이터 관찰 2) 템플릿 컴파일 3) 인스턴스를 DOM에 마운트 4) 데이터 변경 시 DOM을 업데이트라는 일련의 과정을 거치게된다. 이 과정에서 라이프사이클 훅이라 불리는 함수를 사용해 사용자가 특정 단계에서 자신의 코드를 추가할 수 있는 기회를 제공한다.

 

예를들어, created 훅은 인스턴스가 생성된 후에 실행되는 함수다. 그러므로 count의 데이터값이 1로 업데이트된 후에 created 함수가 실행되므로 콘솔창에는 count is: 1이 출력된다.

Vue.createApp({
  data() {
    return { count: 1 }
  },
  created() {
    console.log('count is: ' + this.count) // count is: 1
  }
})

 

라이프사이클 다이어그램

용어정리

1. 크리에이트 (Create)

:  컴포넌트가 Vue에서 생성되는 것 (데이터에 접근가능)

1. 마운트 (Mount)

DOM이 생성되고 브라우저에 컴포넌트가 나타나는 것 (HTML에 연결됨)

2. 업데이트 (Update)
: 브라우저에 컴포넌트가 업데이트 되는 것 (기존 데이터가 업데이트될때)

3. 언마운트 (Unmount)
: 브라우저에 컴포넌트가 사라지고 컴포넌트를 DOM에서 제거하는 것

 

진행순서

1. Vue.createApp()으로 인스턴스를 만들고 프로젝트 시작 (어플리케이션 생성)
2. mount로 HTML 구조에 연결

3. 1차 초기화: 어플리케이션 초기화 (init) (컴포넌트의 기본적인 내용들 을 초기화하는 단계:이벤트를 초기화, 라이프 사이클 동작시킬 준비)

4. beforeCreate 훅으로 컴포넌트가 생성되기 직전에 실행하고 싶은 동작을 해당 함수에 입력한다

5. 2차 초기화: 컴포넌트 생성 (데이터 주입, 반응성 데이터 만드는 단계 )

6. created 훅으로 컴포넌트가 생성 된 직후에 실행하고 싶은 동작을 해당 함수에 입력한다

7. template option이 있다면 template을 render 함수에 컴파일한다

8. template option이 없다면 el의 innerHTML을 template으로 컴파일한다

9. beforeMount 훅으로 HTML 구조에 연결이 되기 직전에 실행하고 싶은 동작을 해당 함수에 입력한다

10. HTML 구조에 연결된다 (DOM에 접근 가능, HTML 요소 참조 가능한 시점은 여기서부터)

11. mounted 훅으로 HTML 구조에 연결이 되기 직후에 실행하고 싶은 동작을 해당 함수에 입력한다

12. Vue 컴포넌트가 화면에 출력된 mounted 상태가 된다

13. Vue에 저장한 데이터가 변한다 (Mount)

14. beforeUpdate 훅으로 가상 DOM에서 화면을 다시 그리기 직전에 실행하고 싶은 동작을 해당 함수에 입력한다

15. 업데이트된 데이터를 화면에 출력하기 위해 가상 DOM에서 화면을 다시 그려준다 (Update)

16. updated 훅으로 가상 DOM에서 화면을 다시 그리기 직후에 실행하고 싶은 동작을 해당 함수에 입력한다

17. app.unmount() 함수가 호출된다

18. beforeUnmount 훅으로 뷰에서 작성한 컴포넌트의 연결이 끊어지기 직전에 실행하고 싶은 동작을 해당 함수에 입력한다

19. 컴포넌트의 연결이 끊어진다 (Unmount)

20. unmounted 훅으로 뷰에서 작성한 컴포넌트의 연결이 끊어진 직후에 실행하고 싶은 동작을 해당 함수에 입력한다

 

라이프사이클 Hook 정리

• beforeCreate: 컴포넌트가 생성되기 직전에 실행
• created: 컴포넌트가 생성된 직후에 실행
• beforeMount: HTML 구조에 연결이 되기 직전에 실행
• mounted: HTML 구조에 연결이 된 직후에 실행
• beforeUpdate: 가상 DOM에서 화면을 다시 그리기 직전에 실행
• updated: 가상 DOM에서 화면을 다시 그린 직후에 실행
• beforeUnmount: 뷰에서 작성한 컴포넌트의 연결이 끊어지기 직전에 실행
• unmounted: 뷰에서 작성한 컴포넌트의 연결이 끊어진 직후에 실행

자주 사용하는 라이프사이클 Hook

1. created: 데이터에 접근 가능
2. mounted: HTML 요소에 접근 가능

 

즉 HTML 없이 컴포넌트가 연결된 직후에 데이터만 다룰때는 created를 사용하고 HTML이 연결된 후에 동작해야할때는 mounted를 사용한다