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

일단 cmd에 vue create 프로젝트명을 입력해 

 

Vue.js 프로젝트 패키지를 만들면,

 

기본으로 public이라는 폴더에 index.html과

 

src 폴더에 main.js가 생성된다.

 

 

React나 Vue는 웹-앱인데 서버에서 html 정보를 다 만들어서주는 타임리프나, JSP와 다르게

 

실질적으로 페이지가 나눠져있는 웹개발 방식이 아니다.

 

실은 페이지는 index.html 하나고 사용자의 요청에따라 개발자가 작성한 vue페이지(컴포넌트라고 한다)를 index.html에 입힌다.

 

그리고 다른 페이지로 이동하라는 명령을 내리면 현재 index.html에 입혀진 vue 컴포넌트를 파괴하고 새로운 컴포넌트를 index.html에 입히는것이다.

 

그리고 그 작업을 main.js가 한다.

 

 

그래서 vue나 react의 라이프사이클을 보면 created, mounted, updated, useEffect 등등 있는데,

 

created는 index.html에 장착될 해당 vue 컴포넌트의 데이터 생성 후,

 

mounted는 vue 컴포넌트가 index.html에 장착된 후를 뜻한다.

 

updated는 컴포넌트에서 정의된 data나 state 등이 변경될 시 가상돔이 이를 감지해

 

변경된 컴포넌트를 화면이 재렌더링한 후를 뜻한다.

 

 

그리고 해당 라이프사이클이 순차적으로 동작할 때, 특정 단계에서 동작할 코드를 넣어주는것을

 

라이프 사이클 훅을 걸어준다'라고 한다.

 

 

보통 저 세 단계에 훅을 걸고 다른 경우는 크게 사용하지않는것같다.