[Vue] 생명주기

Vue.js

프로젝트가 커질수록 부모, 자식 관계가 많아질텐데 각 컴포넌트의 생명주기를 알아야 완성도 있는 구현이 가능하다. 

 

Todo list 페이지를 사용한다고 하면 아래와 같은 흐름으로 로딩되어 화면이 구성된다. 

index.html -> main.js -> App.vue -> Todolist.vue -> Todolist components - TodolistItem

1. 메인 엔트리 포인트: App.vue 로딩
   • PostList 컴포넌트가 로딩됨 (<PostList />)
2. PostList.vue: 게시글 목록을 불러와 자식 컴포넌트인 PostItem.vue로 전달
   • onMounted가 실행되면서 API 호출로 데이터를 가져옴
   • posts에 데이터가 업데이트되면서 자동으로 화면이 리렌더링됨
   • 각각의 <PostItem />이 v-for를 통해 렌더링됨
3. PostItem.vue: 각 게시글을 개별로 렌더링
   • 클릭 시 라우터로 상세 페이지로 이동 (router.push)

 

만약, DOM이 완성되지 않은 상태에서 목록 정보를 onMounted없이 즉시 호출한다면 빈 값이 PostItem 전달되기 때문에 데이터 로딩 오류가 난다.

데이터를 불러오기 전에 화면을 렌더링하거나, 값이 빈 상태로 전송하거나, 변경된 데이터를 화면에 즉시 반영하지 못하는 등의 상황을 막고 협업에서 각각의 컴포넌트를 오류없이 합치기 위해 컴포넌트 생명주기 이해는 필수적이다.

 

beforeCreate 인스턴스가 초기화된 후, 데이터에 대한 관찰 기능, 이벤트가 설정되기 전에 동기적으로 호출

created 인스턴스 생성이 완료된 후 동기적으로 호출됨.

• 데이터 관찰 기능, 계산된 속성, 메서드, 이벤트 초기화 등이 모두 완료된 상태임

beforeMount 마운팅이 시작되기 직전에 호출됨.

mounted mount()에 의해 컴포넌트 인스턴스가 HTML Document의 요소에 마운트된 후에 호출

beforeUpdate 데이터가 변경되고 DOM이 패치되기 전에 호출됨.

updated 데이터의 변경으로 가상 DOM이 다시 렌더링되고 패치된 후에 호출됨

• 컴포넌트의 DOM이 업데이트된 상태로 DOM에 종속성이 있는 처리를 이 단계에서 수행

beforeUnmount 컴포넌트 인스턴스가 언마운트되기 직전에 호출됨

unmounted 컴포넌트이 인스턴스가 언마운트된 후에 호출됨(자식도 모두 언마운트된 상태임)

• 컴포넌트의 모든 디렉티브들의 연결이 해제되고, 모든 이벤트 리스너가 제거됨

errorCaptured 컴포넌트의 자식 컴포넌트 트리에서 오류가 발생하면 컴포넌트 트리를 거슬러 올라와서 이 메서드가 실행됨

• 컴포넌트 자신에서 발생한 오류는 잡아내지 못함