Vue 3 ) 뷰 라이프사이클의 변경?!

Vue Component LifeCycle ( 생명주기 )

• Vue 공식문서를 살펴보던 중 기존의 LifeCycle 과 다르게 destory 부분이 없어지고 새로운 LifeCycle 요소가 생긴 것을 확인할 수 있었습니다. 그래서 새롭게 바뀌어진 Vue LifeCycle 에 대해 정리하는 글을 쓰고자 했습니다.

LifeCycle 이란?

• 컴포넌트를 생성하여 DOM 노드 트리에 마운트하고, 불필요한 엘리먼트를 제거하는 일련의 과정을 생명주기라고 합니다.
• Vue는 각 생명주기를 Hooking 할 수 있는 방법을 제공하는데 이를 LifeCycle Hook 이라고 합니다.
• Options API를 사용할 경우, 각 LifeCycle은 지정된 옵션 함수를 정의하여 Hooking 할 수 있습니다.

LifeCycle은 어떻게 이루어져 있을까?

beforeCreate

• 컴포넌트를 생성하기 전에 호출됩니다.
• 컴포지션 API의 setup 함수 그 자체가 beforeCreate 를 대체합니다.
• 컴포넌트가 생성되기 전에 호출이 되기 때문에 생성한 data와 해당 data를 관찰하는 watch 와 같은 함수들이 동작하지 않습니다.
• setup 함수 내 작성하는 모든 코드는 beforeCreate 를 대체하므로, setup 함수 내에서 사용 가능한 beforeCreate 는 따로 없습니다.

created

• 컴포넌트가 생성되면 호출됩니다.
• 컴포지션 API의 setup 함수가 beforeCreate 와 함께 created 도 대체합니다.
• 컴포넌트 옵션에 접근이 가능하기 때문에 data 옵션에 선언한 데이터들을 초기화할 때 많이 사용합니다.

 

반응형

 

beforeMount (onBeforeMount)

• Vue 의 가상 노드가 render 함수를 호출하기 직전에 호출됩니다.
• 실제 DOM을 구성하기 직전에 호출된다고 할 수 있습니다.
• beforeMount 사이클이 지나고나면 Vue는 가상 DOM 에 가상으로 렌더링할 DOM 을 미리 구성합니다. 이 과정은 onRenderTracked LifeCycle 훅을 통해 관찰 가능합니다..

mounted (onMounted)

• 실제로 컴포넌트의 구성요소들이 DOM 엘리먼트로 마운트된 후 호출됩니다.
• 이 시점부터 실제 엘리먼트를 참조할 수 있습니다.
  ref와 같은 함수를 통해 엘리먼트의 참조변수를 만들었다면, mounted 사이클 이전까지는 초기화한 값으로만 들어있고, 실제 엘리먼트를 참조할 수 없던 반면, 지금부터는 해당 변수를 통해 엘리먼트에 접근할 수 있게 되는 것입니다.
• 실제 엘리먼트에 동적으로 변화를 줘야 할 경우 이 함수에서 처리하는 것이 좋습니다.
• 실제 엘리먼트를 참조한다는 것은 가상 DOM 이 실제 DOM 에 반영이 되었음을 의미합니다.
  따라서 onRenderTriggered 라는 LifeCycle Hook 이 이후에 호출됩니다.

beforeUpdate (onBeforeUpdated)

• 데이터의 변경이 일어났지만 아직 DOM 에 반영되지 않았을 때에 호출됩니다.
• 이미 DOM 을 구성하는 요소가 있는데, 가상 DOM 이 수정되고 이 수정사항이 DOM 에 반영되기 직전에 호출되는 것입니다.
• 아직 변경사항이 DOM 에 반영되지 않았으므로, 실제 엘리먼트를 참조하는 변수로부터 아무것도 얻을 수 없습니다.

updated (onUpdated)

• 데이터가 변경되어 DOM 이 변경완료된 시점에 호출됩니다.
• 이 시점부터는 DOM 이 업데이트되었다고 보고, 해당 DOM 에 참조된 변수를 이용해 다양한 역할을 수행할 수 있습니다.
• 해당 엘리먼트의 자식 노드들이 업데이트가 완료되었다고 보장하지 않는다는 점을 주의해야 합니다.
  즉, 현재 컴포넌트만 수정이 되었음을 보장합니다. 따라서 자식 컴포넌트까지 모두 수정된 것을 기다리기 위해서는 nextTick 을 사용해 모든 자식의 업데이트가 완료돠었음을 기다려야 합니다.

updated() {
  this.$nextTick(function(){
    // 모든 자식 컴포넌트가 업데이트 된 뒤 실행
  })
}                

beforeUnmount (onBeforeUnmount)

• 컴포넌트가 탈착되기 직전에 호출됩니다.
• 아직 모든 기능을 사용할 수 있는 상태이므로, 명시적으로 컴포넌트가 Unmount 되기 전에 해줘야 할 것들을 작성하면 좋습니다.

unmounted (onUnmounted)

• 컴포넌트가 탈착되고 나서 호출됩니다.
• 이 시점부터 모든 디렉티브와 이벤트의 사용이 불가능해집니다.

activated (onActivated)

• keep-alive 태그는 컴포넌트가 다시 렌더링되는 것을 방지하고, 상태를 유지하기 위해 쓰입니다.
• 일반적으로 v-is 디렉티브와 함께 쓰여, v-is 디렉티브가 컴포넌트를 변경할 때 기존 컴포넌트의 상태가 사라지지 않게 하기 위해 사용합니다.
• keep-alive 태그로 컴포넌트의 상태가 보존되기 시작하면 onActivated LifeCycle Hook 함수가 호출됩니다.

<keep-alive>
  <component v-is="currentComponent" />
</keep-alive>

deactivated (onDeactivated)

• keep-alive 로 상태가 유지되던 컴포넌트가 효력을 상실하면 호출됩니다.
• 소스코드를 수정한 후 저장하면 Vite 의 HMR 이 해당 컴포넌트를 다시 렌더링하게 되는데, 이 때 keep-alive로 activated 된 컴포넌트에 deactivated 가 호출됨을 확인할 수 있습니다.

renderTracked (onRenderTracked)

• 가상 DOM 이 변경될 때마다 관찰을 목적으로 해당 LifeCycle Hook 이 호출됩니다.
• 이 함수를 통해서 DebuggerEvent 객체를 살펴보면 어떠한 이유로 가상 DOM 이 변경이 되는지 알 수 있습니다.
• DebuggerEvent 는 target 이란 속성을 통해서 Virtual DOM 을 변경시키는 것을 추적할 수 있습니다.

renderTracked(e) {
  console.log(e.target)
}

renderTriggered (onRenderTriggered)

• 가상 DOM 이 DOM 으로 반영이 되어야 할 때 호출됩니다. 따라서 onMounted, onActivated, onUpdated 와 같이 실제 DOM 이 변경되기 직전에 호출됨을 알 수 있습니다.
• 어떠한 이유로 렌더링이 호출되었는지 파악하기 위해서는 onRenderTracked 와 마찬가지로 DebuggerEvent 를 살펴보면 됩니다.
  예를 들어, 새로운 값이 추가되어 렌더링이 다시 되어야 한다면, DebuggerEvent 의 type 속성에는 'add', newValue 속성에는 변화를 일으킨 새로운 값이 들어있을 것입니다.

errorCaptured (onErrorCaptured)

• 자손 컴포넌트에 에러가 발생하면 어느 컴포넌트에서 어떤 에러가 발생했는지 알려줍니다.
• 실제 동작 중에 이러한 에러가 발생하면 안되기 때문에, 일반적으로 개발 중 에러를 캡쳐하기 위해 사용됩니다.