Vue.js 라이프사이클 훅 이란

참고 블로그 : https://velog.io/@yeyo0x0/Vue.js-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4-%ED%9B%85

[Vue.js] 라이프사이클 훅

 

https://blog.ddark.kr/vuejs-lifecycle/

Vue.js의 라이프사이클 이해

vue에서는 모든게 컴포넌트다.

그렇다면 페이지도 컴포넌트다.

라이프 사이클을 따라간다.

 

뮤지컬, 연극으로 생각하라

각 씬이 넘어갈 때, 조명이 잠깐 꺼졌다가 바로 다음 장면이 세팅이 되어있는걸 본 적 있죠?

무대에도 '시작 - '끝'이 있죠. 이게 라이프사이클과 같아요.

그리고 배우 한명 한명이 있듯이요.

 

 

해가 뜨고 달이 뜨고 지는 애니메이션이 있다고 생각해볼게요.

화면 자체가 페이지면, 동산은 객체, 달이 끝까지 가면 '끝'이라고 나오는 페이지라고 하면

페이지가 두개가 됩니다.

 

페이지 처음 진입(생성 //마운티드)

낮배경+ 동산+ 해 객체가 들어옴

해가 오른쪽 끝까지 어느 시점에 도착하면

밤배경 + 동산 + 해(소멸) + 달 객체 생성

달이 오른쪽 끝까지 도착하면

밤배경 X -> 동산 X -> 페이지 죽고 다음 페이지 생성(끝)

 

이렇게 하나하나, 전부 생명을 가지고 있다고 생각해보면 되는 것이다.

 

지구의 라이프사이클이라고하면 어떨까?

땅만 있으면 시작과 끝일까?

 

지구가 종료되려면, 지구에 살고 있는 객체들(사람들,생명들)부터도 사라져야하고

또 지구의 요소 하나하나도 달라져야 하는 것이다.

 

라이프스타일 '생애주기'라는건 결국

연극 - 웹페이지 와 상황을 매치해보면 이해하기 쉽다.

 

created => 소품들(data) 다 챙기고 나가기 직전 준비하는 것

mounted => 연기하려고 무대에 짠! 나가서 보여주는 것

updated => > A가 독극물 먹으면 B가 괜찮아!?하러오는 씬, 그럼 독극물 마시는걸 확인 하고 와야겠죠? A가 나오자마자 괜찮냐고 물어보면 안됩니다. 그래서 A의 상태와 제스처가 달라지는걸 계속 지켜보고 있다가 달라지면, 그때 배우가 달려오죠. 

deystored =>

연극에서 객체는 서로 소통하고있죠?

그냥 단순히 죽으면 끝이 아니라, 한명의 배우가 '나 이제 죽을 씬이야! 그 다음 네가 나오는거야!'라고 말해줘야

다음 배우가 태어나는(나올 수 있는)거다.

객체와 객체가 상호작용을 해야하니까 이 라이프사이클이란게 필요한거예요.