라이프 사이클이란 ?
- Vue 인스턴스나 컴포넌트가 생성되고 소멸되기까지의 단계
- 각 단계에서 실행되는 함수들을 라이프사이클 훅(hook) 이라 함.
Creation - 컴포넌트 초기화 단계
- 라이프 사이클 중에서 가장 먼저 실행됨.
- 컴포넌트가 DOM에 추가되기 전에 수행되며 다른 훅과 달리 서버 렌더링 중에도 실행됨.
- 클라이언트 렌더링 및 서버 렌더링 과정 모두에서 컴포넌트를 설정할 필요가 있다면 이 단계에서 처리함.
- 아직 컴포넌트가 DOM에 추가되기 전이기 때문에 DOM에 접근하거나 this.$el 를 사용할 수 없음.
💡 DOM이란 ?
- Document Object Model로, 웹 문서(페이지)를 객체화한 개념
- ❔Object Model (객체화) 필요한 이유❔
'인터페이스' - 사람이 웹 문서를 조작할 수 있게 하기 위해
💡 렌더링이란 ?
- HTML로 입력 받아 해석해서 표준 출력 장치 (모니터)로 출력해주는 작업
beforeCreate
- 가장 먼저 실행되는 훅으로, 컴포넌트를 초기화함.
- 아직 data와 methods가 설정되지 않은 단계
- DOM과 같은 화면 요소에도 접근할 수 X
created
- 템플릿 및 가상 DOM이 마운팅 및 렌더링 되기 전에 실행됨.
- data와 methods가 정의되어 액세스할 수 있음.
- 컴포넌트가 생성되고 나서 실행되는 단계이기 때문에 서버에 데이터를 요청하여 받아오는 로직을 수행하기에 좋음.
Mounting - DOM 삽입 단계
- 가장 많이 사용되는 훅
- 초기 렌더링 전후에 즉시 컴포넌트에 액세스 가능
- BUT 서버 측 렌더링이 실행되는 동안에는 X
- 초기 렌더링 직전이나 직후에 DOM에 접근하거나 수정해야하는 경우 사용함.
beforeMount
- 템플릿 및 렌더 함수들이 컴파일된 후, 초기 렌더링이 일어나기 직전에 실행됨.
- 대부분의 경우 사용하지 않는 것이 좋음.
mounted
- el 속성에서 지정한 화면 요소(DOM)에 인스턴스가 부착되고 나면 호출되는 단계
- 컴포넌트, 템플릿, 렌더링된 DOM에 접근 가능 -> 화면 요소를 제어하는 로직을 수행하기 좋음.
Updating - Diff 및 재 렌더링 단계
- 컴포넌트에서 사용하는 반응형 속성들이 변경되거나 재 렌더링될 때마다 호출됨.
- 디버깅이나 프로파일링을 위해 컴포넌트가 재 렌더링되는 시기를 알고 싶은 경우 사용함.
beforeUpdate
- 컴포넌트 데이터가 변경되어 DOM이 재 렌더링되기 직전에 실행됨.
- 변경 예정 데이터의 값과 관련된 로직을 미리 넣을 수 있음.
updated
- 컴포넌트 데이터가 변경되어 재 렌더링된 후에 호출됨.
- 이 훅에서 데이터를 변경하는 것은 무한 루프를 일으킬 수 있음.
Destruction - 해체 단계
- 컴포넌트가 해체되고 DOM에서 제거될 때 실행됨.
beforeDestroy
- 해체 직전에 실행되며 컴포넌트는 여전히 완전하게 존재하고 작동함.
- 서버 렌더링 시 호출 X
destroyed
- 컴포넌트가 해체된 후 호출됨.
- 모든 하위 Vue 인스턴스들이 삭제됨.
- 서버 렌더링 시 호출 X
라이프사이클을 이해하고 사용하면 Vue 인스턴스의 동작을 좀 더 세밀하게 제어하고, 필요한 로직을 적절한 시점에서 실행할 수 있음.
👉 참고하기 좋은 자료
