LifeCycle Hook
LifeCycle 생명주기란 ? 각각의 Vue 컴포넌트 인스턴스가 생성되고 소멸될 때까지의 거치는 과정
라이프 사이클 훅은 위와 같이 라이프 사이클 단계에서 사용자가 자신의 코드를 추가할 수 있는 단계별 기능으로 각 단계 사이사이에 실행되는 함수들을 말한다.
Creation(생성) -> Mounting(장착) -> Updating(수정) -> Destruction(소멸)
Creation (생성)
컴포넌트 초기화 단계, 아직 컴포넌트가 DOM에 추가 되기 전이기 때문에 접근할 수 없다.
setup()
Composition API의 setup() 훅은 Options API 훅보다 먼저 호출된다.
beforeCreate
컴포넌트 인스턴스 초기화 완료전에 실행하므로 this 에 접근할 수 없다.
created
컴포넌트 인스턴스가 초기화를 완료한 후에 호출된다.
export default {
setup() {
console.log("setup"); //setup 출력
return {};
},
data: () => ({
dataMessage: "data message",
}),
beforeCreate() {
console.log("beforeCreate", this.dataMessage); // undefined 출력
},
created() {
console.log("create", this.dataMessage); //datamessge 출력
console.log(this); // 인스턴스 접근 가능
},
};
- setup() 훅
- beforeCreate() : 초기화 완료전에 실행되기 때문에 undefined 출력
- created() : 초기화 완료 후 호출하여 접근 가능, 부모 -> 자식 순으로 생성된다.
Mounting (장착)
DOM 에 컴포넌트를 삽입하는 단계
onBeforeMount
컴포넌트가 마운트 되기 직전에 호출되어 DOM에 접근할 수 없다.
onMounted
컴포넌트가 마운트 된 후에 호출되어 DOM에 접근가능하다. 모든 자식 컴포넌트가 마운트 되는 것은 자체 DOM 트리가 생성되어 상위 컴포넌트에 삽입됨을 의미한다. 즉, 자식 -> 부모 순으로 마운트된다.
import { onBeforeMount, onMounted, ref } from "vue";
export default {
setup() {
console.log("setup");
const inputRef = ref(null);
onBeforeMount(() => {
console.log("onBeforeMount", inputRef.value); //null 출력
});
onMounted(() => {
console.log("onMounted", inputRef.value); //hello world! 출력
});
return { inputRef };
},
};
- setup() 훅 호출 : inputRef 변수 생성
- onBeforeMount() 호출 : 마운트 완료 전이라 DOM에 접근할 수 없어 null
- onMounted() 호출 : 마운트가 완료되어 DOM의 inputRef.value 에 접근 가능
Updating (수정)
반응형 상태 변경으로 컴포넌트의 DOM 트리가 업데이트 후 호출된 콜백을 등록한다.
onBeforeUpdate
반응형 상태 변경으로 컴포넌트의 DOM 트리를 업데이트하기 직전에 호출될 콜백을 등록한다.
onUpdated
반응 상태 변경으로 인해 컴포넌트가 DOM 트리를 업데이트한 후에 호출된다.
상위 컴포넌트의 onUpdated 는 자식 컴포넌트부터 부모 컴포넌트 순으로 호출된다.
이 훅에서 컴포넌트 상태를 변경하면 무한 업데이트 루프가 발생할 가능성이 있기 때문에 선호하지 않는다.
Destruction (소멸)
onBeforeUnmount
컴포넌트가 마운트 해제되기 직전에 호출
onUnmounted
컴포넌트가 마운트 해제된 후 호출
마치며
언어를 배울 때마다 대개 비슷하겠지만 라이프 사이클을 파악하는 것이 중요하다고 생각한다.
그래야 마운트 되기전에 처리해야하는 로직이나, 언마운트 되기 전에 처리해야하는 로직이 있기 때문에 생명주기를 알아둬야 적절히 잘 사용할 수 있을 것이다.
눈에 보이지 않는 것이기도 하고 이미 설정되어 있는 메서드이기 때문에 잘 이해하기는 엄청 와닿지는 않는데, 다이어그램을 보며 어떤 순으로 진행이 되는 지는 잘 파악해야할 것이다.
