반응형
1. Lifecycle
리액트 관련 글에선 생명주기 함수라고 많이 하던데 Vue에서는 생명주기라고 부르는 경우를 잘 못본거 같다.
어쨌건 이 라이프 사이클이 뭐냐면 인스턴스가 생성되고 소멸되기까지의 과정이 어쩌구 저쩌구 하는데,
그냥 컴포넌트가 화면에 나타나고 사라질때까지의 과정을 여러 단계로 세분화 해놓은거라고 생각하면 됩니다.
아래는 vue 공식 문서에서 볼수 있는 라이프사이클 다이어그램입니다.
2. 무엇때문에 알아야 하는가?
컴포넌트가 화면에 나타날때는 내부적으로 코드를 읽어 내용물을 생성한 후(create) 화면에 출력(mount)해 줍니다.
또한 데이터 값이 변한다던가(update) 다른페이지로 이동하게되어 컴포넌트가 삭제(unmount)될 수도 있습니다.
이러한 각각의 타이밍에 라이프 사이클 훅(hook)을 이용해 어떠한 명령(코드)를 시키기 위해 라이프 사이클을 이용합니다.
예를들면, 컴포넌트가 생성되자마자 출력되기전에 서버에 요청을 보내 데이터를 가져오고, 그 데이터와 함께 화면에 출력하라는 식으로 사용합니다.
3. 라이프사이클 훅의 종류
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeUnmount
- unmounted
- errorCaptured
- renderTracked
- renderTriggered
- activated
- deactivated
- serverPrefetch
뭔가 종류는 많아 보이지만 자주 쓰이는건 거의 정해져있다 싶이 하고, 이름만 봐도 ~하기 전에(before)라던가 ~하고난 후(~ted)같은 형식으로 되어있어 알기 쉽게 되어 있으니 필요에 따라 사용하시면 됩니다.
사용법은 computed같이 함수 형식으로 실행할 내용을 작성하면 됩니다.
mounted() {
마운트가 되고나면 실행할 내용
},
자주 사용되는 라이프 사이클 훅
created, mounted
beforeMount, destroyed
반응형