Vue3 lifeCycle는 어떤 방식으로 동작할까?

모든 일에는 라이프사이클이 있다. 기획서를 쓰건, 영상을 만들건, 사업을 하던 말이다.

모든 일들이 그렇겠지만 어떻게 굴러가는지 알아야, 잘 굴릴 수 있다.

그래서 이번에는 vue3의 생애주기에 대해서 공부한 내용을 정리해보고자 한다.

Lifecycle Hooks - 수명주기, 생명주기

컴포넌트를 만들기만 하면 되는거 아니야? 왜 생애주기에 대해서 알아야할까?

물론 컴포넌트를 만들고, state, props를 사용해서 데이터를 변경하는 것만으로도 간단한 웹을 만들 수 있다.

다시 생각해보면 그 정도로는 간단한 웹만을 만들 수 밖에 없다는 뜻이기도하다.

결론부터 이야기해보자면, 프로그램에 대한 통제권을 가지기 위해서다.
라이프 사이클을 앎으로서, 컴포넌트의 생성, 변화하는 일련의 프로세스를 통제할 수 있게 된다.
내가 만든 프로그램이 어떻게 동작하는지 모른다면, 예외의 경우에 통제하기 어려울 수 있기 때문이다.

각 Vue 컴포넌트 인스턴스는 생성될 때 일련의 초기화 단계를 거친다. 데이터 감시를 설정하고, 템플릿을 컴파일하고, 인스턴스를 DOM에 마운트하고, 데이터가 변경되면 DOM을 업데이트한다. 그 과정에서 수명 주기 훅(lifecycle hooks)이라 불리는 함수도 실행하여, 특정 단계에서 개발자가 의도하는 로직이 실행될 수 있다.

Lifecycle in option API

vue3에선 몇몇 lifecycle의 명칭이 바뀌었다.
optionAPI에선 어떤 훅이 있는지 살펴보자.

beforeCreated

• 가장 먼저 실행되는 훅인 beforeCreated는 Vue인스턴스가 초기화 된 직후에 발생됨.
• 컴포넌트가 DOM에 추가되기 전이기 때문에 data, methods에 접근 불가능
• 컴포지션 API의 setup() 훅은 옵션 API의 어떤 훅보다 먼저 (beforeCreate() 훅보다 빨리) 호출

created

• 반응형 데이터, 계산된 속성, 메서드 및 감시자가 설정된 후, 호출
• data를 반응형으로 추적할 수 있게 되며 computed, methods, watch등이 활성화되어 접근이 가능
• DOM에 추가되기 전 상태로, data에 직접 접근이 가능하기 때문에, 외부에서 받아온 값들로 data를 세팅하거나, 이벤트 리스너를 선언할때 적합

beforeMount

• DOM에 부착하기 직전에 호출되는 beforeMount훅은 이 단계 전에서 템플릿이 있는지 없는지 확인한 후 템플릿을 렌더링 한 상태이므로, 가상 DOM이 생성되어 있으나 실제 DOM에 부착되지는 않은 상태.

mounted

• 가상 DOM의 내용이 실제 DOM에 부착되고 난 이후에 실행되므로,this.$el을 비롯한 data, computed, methods, watch 등 모든 요소에 접근이 가능함.
• 자식 컴포넌트의 mounted 훅 이후에 부모 컴포넌트의 mounted 훅이 발생한다.
  • 다만, 자식 컴포넌트가 서버에서 비동기로 데이터를 받아오는 경우처럼 부모의 mounted훅이 모든 자식 컴포넌트가 마운트 된 상태를 보장하지는 않음.
• 따라서 this.$nextTick를 이용하면, 모든 화면이 렌더링 된 이후에 실행되므로 마운트 상태를 보장할 수 있음.

beforeUpdate

• 컴포넌트에서 사용되는 반응형 데이터가 변하면서, 업데이트된 상태를 DOM에 적용시켜야할 때 호출된다.

updated

• 실제 DOM이 변경된 이후에 호출
• 변경된 data가 DOM에도 적용된 상태이기에 만약 변경된 값들을 DOM을 이용해 접근하고 싶다면, updated훅이 가장 적절
• 그러나, data를 이 훅에서 변경하는 것은 무한 루프를 일으킬 수 있으므로 이 훅에서는 데이터를 직접 바꾸어서는 안되며,mounted훅과 마찬가지로 this.$nextTick을 이용하여 모든 화면이 업데이트된 이후의 상태를 보장할 수 있음.

beforeUnmount

• 해당 인승턴스가 언마운트 직전에 훅이 호출됨
• 해체되기 이전이므로, 모든 속성에 접근이 가능함, 이벤트 리스너를 해제하는 등, 사라지기전에 해야할 일들을 처리하기에 적절

unmounted

• 컴포넌트가 언마운트된 이후 호출.
• 인스턴스의 속성에 접근할 수 없으며, 하위 vue 인스턴스 역시 삭제된다.

---

Lifecycle in Composition API

Compostion에선 다음과 같은 훅이 있다.

onBeforeMounte

• 컴포넌트가 마운트되기 직전에 호출될 훅을 등록합니다.

onMounted

• 컴포넌트가 마운트된 후 호출될 콜백을 등록합니다.

onBeforeUpdate

• 반응형 상태 변경으로 컴포넌트의 DOM 트리를 업데이트하기 직전에 호출될 콜백을 등록합니다.

onUpdated

• 반응형 상태 변경으로 컴포넌트의 DOM 트리가 업데이트된 후 호출될 콜백을 등록합니다.

onBeforeUnmounte

• 컴포넌트 인스턴스가 마운트 해제되기 직전에 호출될 콜백을 등록합니다.

onUnmounted

• 컴포넌트가 마운트 해제된 후 호출될 콜백을 등록합니다.
• 컴포넌트 마운트 해제 조건
  • 모든 자식 컴포넌트가 마운트 해제됨.
  • 관련된 모든 반응형 이펙트(setup()에서 생성된 렌더 이펙트, 계산된 속성, 감시자)가 중지됨.

---

이렇게만 보면 재미가 없으니까, 직접 컴포넌트를 만들어서 실험해보자.
vue3에선 어떤 방식으로 라이프사이클이 돌아가는지 직접 모든 메서드에 콘솔을 찍어보았다.

1. 라이프사이클이 어떻게 도는지 확인하기위해 다음과 같이 파일을 구성한다.
   
   1. App.vue
   2. Default.vue
   3. TargetView.vue
   4. router/index.js
2. App.vue 내부에 Default.vue가 처음 렌더링 된다.
3. Default.vue는 Target이라는 버튼이 있다.
4. 버튼을 누르면 Target.vue로 라우팅된다.

간단한 테스트 설계도,,?

처음 Default.vue가 렌더링 됐을때 볼 수 있는 로그다.

1. App.vue가 생성, 마운트

2. 라우터 작동

3. Default.vue의 생성, 마운트

Default.vue의 초기 화면, target 버튼을 렌더링하고 있다.

이후 버튼을 눌러서 Target.vue로 라우팅 했다.

1. default.vue 컴포넌트 내부에서 라우트 훅 작동

2. 전체 라우터 훅 작동

3. Defult.vue는 언마운트될 준비를 마친다.

4. Target.vue의 생성 후 마운트 직전

5. Default.vue가 언마운트되고, Target.vue가 마운트된다.

keyPoint

• composition은 option의 생명주기훅보다 빠르게 호출된다.
  • 생명주기훅의 시점은 같지만, composition의 훅이 option 보다 우선권을 가진다.
  • 예시 → onUpdated 이후 updated 실행
  • 모든 생명주기 훅중에서 setup() 이 가장 먼저 실행된다.