Vue Life Cycle

청포도봉봉이·2023년 4월 6일
0

Vue

목록 보기
1/11
post-thumbnail

이미지출처
https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram


Vue.js는 컴포넌트 기반의 프론트엔드 프레임워크이며, 컴포넌트가 생성되고 업데이트되는 데에는 라이프사이클 메서드가 사용됩니다. Vue.js의 라이프사이클 메서드는 크게 생성, 갱신, 소멸의 단계로 나누어집니다.

생성 단계 (Creation phase)

생성 단계는 Vue 인스턴스가 생성되는 단계로, 아직 DOM에 마운트되지 않았습니다. 생성 단계에서 호출되는 라이프사이클 메서드는 다음과 같습니다.

  • beforeCreate
    beforeCreate는 Vue 인스턴스가 생성되기 전에 호출되는 메서드입니다. 이 단계에서는 아직 인스턴스의 데이터나 이벤트 처리기가 초기화되지 않은 상태입니다. 대신, data나 methods와 같은 인스턴스 옵션에 접근할 수 있습니다.

  • created
    created는 Vue 인스턴스가 생성되고 data가 인스턴스에 반영되어 사용 가능한 상태이지만, DOM에는 마운트되지 않은 상태입니다. 이 단계에서는 data의 변경 감지, 계산된 속성(computed), 메서드(methods), 감시자(watcher)와 같은 Vue 인스턴스의 초기화 작업이 이루어집니다.

갱신 단계 (Updating phase)

갱신 단계는 Vue 인스턴스가 업데이트되는 단계입니다. 갱신 단계에서 호출되는 라이프사이클 메서드는 다음과 같습니다.

  • beforeMount
    beforeMount는 Vue 인스턴스가 DOM에 마운트되기 직전에 호출됩니다. 이 단계에서는 인스턴스의 template이 render() 함수로 컴파일되고, el 프로퍼티가 실제 DOM 요소로 바인딩됩니다.

  • mounted
    mounted는 Vue 인스턴스가 DOM에 마운트된 이후에 호출됩니다. 이 단계에서는 인스턴스의 데이터와 DOM이 동기화되어 사용자에게 보여지게 됩니다. 이 단계에서는 mounted 라이프사이클 훅 안에서 $nextTick() 메서드를 사용하여 DOM 업데이트 후의 콜백을 등록할 수 있습니다.

  • beforeUpdate
    beforeUpdate는 데이터가 변경되어 DOM을 업데이트하기 전에 호출됩니다. 이 단계에서는 변경되기 전의 데이터와 변경 후의 데이터를 비교할 수 있습니다. 이 단계에서 data를 변경하는 것은 권장하지 않습니다.

  • updated
    updated는 beforeUpdate 이후에 데이터가 변경되어 DOM을 업데이트하고 난 후에 호출되는 메서드입니다. 이 단계에서는 데이터와 DOM이 모두 업데이트된 상태입니다. 이 단계에서 updated 라이프사이클 훅 안에서 $nextTick() 메서드를 사용하여 DOM 업데이트 후의 콜백을 등록할 수 있습니다.

소멸 단계 (Destruction phase)

소멸 단계는 Vue 인스턴스가 소멸되는 단계입니다. 소멸 단계에서 호출되는 라이프사이클 메서드는 다음과 같습니다.

  • beforeDestroy
    beforeDestroy는 Vue 인스턴스가 소멸되기 직전에 호출됩니다. 이 단계에서는 Vue 인스턴스와 관련된 모든 이벤트 리스너(event listener)와 watcher를 제거하는 작업을 수행할 수 있습니다.

  • destroyed
    destroyed는 Vue 인스턴스가 소멸된 이후에 호출됩니다. 이 단계에서는 인스턴스에 바인딩된 모든 이벤트 리스너와 watcher가 제거되고, Vue 인스턴스와 관련된 모든 객체와 메모리가 해제됩니다.

이러한 라이프사이클 메서드를 활용하여 Vue.js 애플리케이션의 동작을 조절하고 컴포넌트가 생성되고 업데이트되는 과정에서 필요한 작업들을 수행할 수 있습니다.


Vue.js에서 라이프사이클 메서드는 전역적으로 사용할 수 있는 라이브러리나 플러그인에서도 유용하게 사용됩니다. 예를 들어 Vue.js를 이용해 서버 사이드 렌더링을 할 때는 created와 mounted 단계에서 axios를 사용하여 데이터를 가져올 수 있습니다.

또한 activated와 deactivated 단계는 Vue.js의 라우터에서 많이 사용됩니다. 예를 들어 사용자가 다른 페이지로 이동할 때 현재 페이지에서 실행 중인 애니메이션을 중지하는 등의 작업을 수행할 수 있습니다.

또한 watch와 computed 속성은 Vue.js에서 데이터의 변경을 감지하고 필요한 작업을 수행하는데 중요한 역할을 합니다. watch는 데이터 변경 시 특정 동작을 수행하며, computed는 데이터 변경 시 연산된 값을 반환합니다. 둘 다 Vue.js의 라이프사이클과 밀접하게 연관되어 있습니다.

마지막으로, Vue.js의 라이프사이클을 이해하는 것은 애플리케이션의 성능을 향상시키는 데 도움이 됩니다. 불필요한 렌더링을 방지하고 데이터 변경에 따른 애플리케이션의 동작을 최적화할 수 있습니다. 따라서 Vue.js 애플리케이션을 개발할 때는 라이프사이클을 잘 이해하고 적절하게 활용하는 것이 중요합니다.

profile
자존감 낮아질 시간에 열심히 공부하고 커밋하자😊😊

0개의 댓글